/* MonobankDS — Design Tokens (CSS Custom Properties)
   Auto-generated from Figma "04 / UI Kit (Claude Assistant)"
   Last updated: 2026-03-25
*/

:root {
  /* ========================================
     SEMANTIC COLOR TOKENS
     ======================================== */

  /* Text */
  --ds-text-primary: #000000;
  --ds-text-inverse: #ffffff;
  --ds-text-secondary: #808080;
  --ds-text-tertiary: #b2b2b2;
  --ds-text-disabled: #c2c2c2;
  --ds-text-error: #fa5255;
  --ds-text-error-red: #fe5659;
  --ds-text-accent: #294e90;
  --ds-text-link: #3578c3;
  --ds-text-dark-secondary: #6f7183;
  --ds-text-cashback: #009994;
  --ds-text-pundiki: #d23bea;
  --ds-text-promo: #e756b4;

  /* Background */
  --ds-bg-primary: #ffffff;
  --ds-bg-secondary: #f4f4f4;
  --ds-bg-muted: #f4f4f4;
  --ds-bg-disabled: #f4f4f4;
  --ds-bg-disabled-light: #d9d9d9;
  --ds-bg-dark: #000000;
  --ds-bg-elevated: #212121;
  --ds-bg-subtle: #f4f4f4;
  --ds-bg-overlay: #c4c4c4;
  --ds-bg-accent-light: #d5e4ff;
  --ds-bg-accent: #0798ca;
  --ds-bg-error-light: #fff4f4;
  --ds-bg-destructive: #fa5255;
  --ds-bg-success: #04b40b;
  --ds-bg-warning: #ff9500;
  --ds-bg-image: #000000;
  --ds-bg-placeholder: #dadada;
  --ds-bg-active: #272727;
  --ds-bg-selection: #3556ff;
  --ds-bg-reaction: #6661ff;
  --ds-bg-avatar: #e3e7f1;
  --ds-bg-dark-blue: #2d333f;
  --ds-bg-near-black: #0d0d0d;
  --ds-bg-surface-dark: #121212;
  --ds-bg-call-end: #ff2929;
  --ds-bg-panel-dark: #2c2c2c;

  /* Border */
  --ds-border-default: #000000;
  --ds-border-inverse: #ffffff;
  --ds-border-error: #fa5255;
  --ds-border-subtle: #f4f4f4;
  --ds-border-muted: #cccccc;
  --ds-border-light: #f4f4f4;
  --ds-border-light-grey: #e9e9e9;
  --ds-border-accent: #8a38f5;
  --ds-border-disabled: #cccccc;
  --ds-border-comment: #d4daff;
  --ds-border-secondary: #dcdcdc;
  --ds-border-avatar: #ccd0d9;

  /* Icon */
  --ds-icon-primary: #000000;
  --ds-icon-inverse: #ffffff;
  --ds-icon-secondary: #808080;
  --ds-icon-tertiary: #8e8e93;
  --ds-icon-disabled: #b2b2b2;
  --ds-icon-error: #fa5255;
  --ds-icon-accent: #043bff;
  --ds-icon-brand: #109f38;
  --ds-icon-brand-blue: #294e90;
  --ds-icon-reaction: #bf0aff;
  --ds-icon-notification: #ff1c1c;
  --ds-icon-info-blue: #3490ff;
  --ds-icon-accent-teal: #82b7d3;
  --ds-icon-cashback: #00b1aa;
  --ds-icon-promo: #f133ae;

  /* Primary */
  --ds-primary-default: #fa5255;
  --ds-primary-disabled: #cccccc;

  /* Status */
  --ds-status-warning: #ffa36c;
  --ds-status-success: #22c62e;

  /* ========================================
     SPACING
     ======================================== */
  --ds-space-1: 1px;
  --ds-space-2: 2px;
  --ds-space-3: 3px;
  --ds-space-4: 4px;
  --ds-space-5: 5px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-9: 9px;
  --ds-space-10: 10px;
  --ds-space-12: 12px;
  --ds-space-13: 13px;
  --ds-space-14: 14px;
  --ds-space-16: 16px;
  --ds-space-18: 18px;
  --ds-space-20: 20px;
  --ds-space-21: 21px;
  --ds-space-23: 23px;
  --ds-space-24: 24px;
  --ds-space-29: 29px;
  --ds-space-31: 31px;
  --ds-space-32: 32px;
  --ds-space-36: 36px;
  --ds-space-40: 40px;
  --ds-space-44: 44px;
  --ds-space-48: 48px;
  --ds-space-52: 52px;
  --ds-space-56: 56px;
  --ds-space-72: 72px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-space-100: 100px;
  --ds-space-112: 112px;
  --ds-space-139: 139px;
  --ds-space-172: 172px;

  /* ========================================
     RADIUS
     ======================================== */
  --ds-radius-0-5: 0.5px;
  --ds-radius-1: 1px;
  --ds-radius-1-5: 1.5px;
  --ds-radius-2: 2px;
  --ds-radius-2-5: 2.5px;
  --ds-radius-3: 3px;
  --ds-radius-4: 4px;
  --ds-radius-5: 5px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-10: 10px;
  --ds-radius-12: 12px;
  --ds-radius-14: 14px;
  --ds-radius-15: 15px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-25: 25px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-50: 50px;
  --ds-radius-90: 90px;
  --ds-radius-100: 100px;
  --ds-radius-full: 1000px;

  /* ========================================
     STROKE
     ======================================== */
  --ds-stroke-0-25: 0.25px;
  --ds-stroke-0-5: 0.5px;
  --ds-stroke-0-8: 0.8px;
  --ds-stroke-1: 1px;
  --ds-stroke-1-5: 1.5px;
  --ds-stroke-2: 2px;
  --ds-stroke-2-5: 2.5px;
  --ds-stroke-4: 4px;
  --ds-stroke-6: 6px;

  /* ========================================
     ELEVATION (box-shadow)
     ======================================== */
  --ds-elevation-xsmall: 0 1px 0 rgba(0,0,0,0.15);
  --ds-elevation-small: 0 2px 0 rgba(0,0,0,0.15);
  --ds-elevation-medium: 0 4px 8px rgba(0,0,0,0.15);
  --ds-elevation-large: 0 4px 16px rgba(0,0,0,0.15);
  --ds-elevation-xlarge: 0 8px 40px rgba(0,0,0,0.15);
  --ds-elevation-card: 0 4px 32px rgba(0,0,0,0.16);
  --ds-elevation-subtle: 0 3px 1px rgba(0,0,0,0.06);
  --ds-elevation-sheet: 0 3px 8px rgba(0,0,0,0.15);
  --ds-elevation-diffuse: 0 2px 16px rgba(0,0,0,0.1);
  --ds-elevation-tight: 0 1px 2px rgba(0,0,0,0.25);
  --ds-elevation-card-light: 0 8px 16px rgba(0,0,0,0.08);
  --ds-elevation-ambient: 0 0 16px rgba(0,0,0,0.1);

  /* Inner shadows (used as inset box-shadow) */
  --ds-elevation-inner-soft: inset 0 1px 8px rgba(0,0,0,0.1);
  --ds-elevation-inner-subtle: inset 0 1px 2px rgba(124,124,124,0.25);

  /* Blur */
  --ds-blur-background: 27px;

  /* ========================================
     GRADIENTS (as CSS linear-gradient values)
     ======================================== */

  /* Diagonal (135deg) */
  --ds-gradient-diagonal-orange: linear-gradient(135deg, #ff6f00, #ff9954);
  --ds-gradient-diagonal-teal-grey: linear-gradient(135deg, #527380, #839faa);
  --ds-gradient-diagonal-gold-red: linear-gradient(135deg, #ffc700, #ff4d00);
  --ds-gradient-diagonal-purple: linear-gradient(135deg, #6245a5, #785bba);
  --ds-gradient-diagonal-green: linear-gradient(135deg, #008076, #06c75b);
  --ds-gradient-diagonal-blue: linear-gradient(135deg, #055db7, #3f9dff);
  --ds-gradient-diagonal-dark: linear-gradient(135deg, #1a1a1a, #484747);
  --ds-gradient-diagonal-coral: linear-gradient(135deg, #e55e84, #f08a5d);
  --ds-gradient-diagonal-teal: linear-gradient(135deg, #2394a3, #4cc5bf);
  --ds-gradient-diagonal-olive: linear-gradient(135deg, #69714d, #828c60);
  --ds-gradient-diagonal-violet: linear-gradient(135deg, #6c5ab6, #9c58df);
  --ds-gradient-diagonal-lime: linear-gradient(135deg, #298c04, #3ac307);
  --ds-gradient-diagonal-teal-blue: linear-gradient(135deg, #00b1aa, #05579d);
  --ds-gradient-diagonal-indigo: linear-gradient(135deg, #4e54c8, #8f94fb);
  --ds-gradient-diagonal-cyan: linear-gradient(135deg, #008f98, #00d2c6);
  --ds-gradient-diagonal-sky: linear-gradient(135deg, #3790f9, #6cb0ff);
  --ds-gradient-diagonal-black: linear-gradient(135deg, #292929, #000000);
  --ds-gradient-diagonal-tangerine: linear-gradient(135deg, #ff6b00, #ff8329);
  --ds-gradient-diagonal-sunset: linear-gradient(135deg, #ff4974, #ff8a5c);

  /* Vertical (180deg / top to bottom) */
  --ds-gradient-vertical-navy: linear-gradient(180deg, #203a71, #254683);
  --ds-gradient-vertical-grey-teal: linear-gradient(180deg, #839faa, #527380);
  --ds-gradient-vertical-charcoal: linear-gradient(180deg, #2b2b2b, #0e0e0e);
  --ds-gradient-vertical-pink: linear-gradient(180deg, #ee53b0, #e5346a);
  --ds-gradient-vertical-magenta: linear-gradient(180deg, #e75fea, #ea4aed);
  --ds-gradient-vertical-aqua: linear-gradient(180deg, #42c7ff, #0092cf);
  --ds-gradient-vertical-teal: linear-gradient(180deg, #00d1d3, #00a0c4);
  --ds-gradient-vertical-steel-blue: linear-gradient(180deg, #92a4d5, #3948a0);
  --ds-gradient-vertical-lavender: linear-gradient(180deg, #c4a9fe, #8356e7);
  --ds-gradient-vertical-sage: linear-gradient(180deg, #97b3bc, #637e88);
  --ds-gradient-vertical-green: linear-gradient(180deg, #3ac307, #298c04);
  --ds-gradient-vertical-amber: linear-gradient(180deg, #efae42, #f6953a);
  --ds-gradient-vertical-lilac: linear-gradient(180deg, #ead5ff, #e5efff);
  --ds-gradient-vertical-mint: linear-gradient(180deg, #13c98b, #07ad74);
  --ds-gradient-vertical-silver: linear-gradient(180deg, #727272, #c4c4c4);
  --ds-gradient-vertical-emerald: linear-gradient(180deg, #13d26f, #00b451);
  --ds-gradient-vertical-rust: linear-gradient(180deg, #d9541b, #e96026);
  --ds-gradient-vertical-jade: linear-gradient(180deg, #00e78c, #009ea5);
  --ds-gradient-vertical-rose: linear-gradient(180deg, #fca4e2, #f3462c);
  --ds-gradient-vertical-deep-blue: linear-gradient(180deg, #3c5a99, #203a71);
  --ds-gradient-vertical-royal: linear-gradient(180deg, #7171e8, #504ccd);
  --ds-gradient-vertical-gold: linear-gradient(180deg, #9b6e1c, #be9532);
  --ds-gradient-vertical-turquoise: linear-gradient(180deg, #37e8d3, #0cb19d);
  --ds-gradient-vertical-blush: linear-gradient(180deg, #fe898b, #ffb5b7);
  --ds-gradient-vertical-salmon: linear-gradient(180deg, #fe5659, #ff989a);
  --ds-gradient-vertical-deep-indigo: linear-gradient(180deg, #322e9f, #4642ba);
  --ds-gradient-vertical-midnight: linear-gradient(180deg, #0a102a, #2b2b2b);
  --ds-gradient-vertical-fade-white: linear-gradient(180deg, #ffffff, #696a6d);
  --ds-gradient-vertical-near-black: linear-gradient(180deg, #111112, #2b2b2b);
  --ds-gradient-vertical-honey: linear-gradient(180deg, #f6b439, #d98f18);
  --ds-gradient-vertical-graphite: linear-gradient(180deg, #2e3036, #1d1d1f);

  /* Card gradients (3-stop, 135deg) */
  --ds-gradient-card-forest: linear-gradient(135deg, #005531, #009f5f, #1df17a);
  --ds-gradient-card-ocean: linear-gradient(135deg, #003265, #0f68c4, #65b1ff);
  --ds-gradient-card-mono-teal: linear-gradient(135deg, #294e90, #00a0c4, #00d1d3);
  --ds-gradient-card-plum: linear-gradient(135deg, #2f1f6d, #7e38c3, #9c58df);
  --ds-gradient-card-azure: linear-gradient(135deg, #00489a, #0084ce, #0db8f4);
  --ds-gradient-card-coral: linear-gradient(135deg, #bb2d55, #f08a5d, #ffa37a);
  --ds-gradient-card-slate: linear-gradient(135deg, #394663, #59778b, #a7bdcb);
  --ds-gradient-card-indigo: linear-gradient(135deg, #2b256f, #4861a7, #92a4d5);
  --ds-gradient-card-deep-purple: linear-gradient(135deg, #390e6f, #2b28a6, #4383ce);
  --ds-gradient-card-dark-teal: linear-gradient(135deg, #22424e, #507b88, #81a7b3);
  --ds-gradient-card-cyan: linear-gradient(135deg, #006a81, #009ea0, #00d1d3);
  --ds-gradient-card-bronze: linear-gradient(135deg, #765007, #b1810c, #d8a62d);
  --ds-gradient-card-marine: linear-gradient(135deg, #033345, #1c5a9c, #208cff);

  /* Multi-stop special */
  --ds-gradient-multi-pink-orange: linear-gradient(135deg, #b93e88 0%, #ea5c97 40%, #fc918c 70%, #fca78c 100%);
  --ds-gradient-multi-magenta-fire: linear-gradient(135deg, #f00fea 0%, #e94057 50%, #f27121 100%);

  /* Overlay gradients */
  --ds-gradient-overlay-dark-shadow: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  --ds-gradient-overlay-fade-red: linear-gradient(180deg, rgba(250,82,85,1), rgba(250,82,85,0));

  /* ========================================
     COLOR PRIMITIVES (for direct use when semantic tokens don't cover a case)
     ======================================== */

  /* Neutral */
  --ds-neutral-0: #ffffff;
  --ds-neutral-30: #f8f8f8;
  --ds-neutral-90: #e3e7f1;
  --ds-neutral-100: #f4f4f4;
  --ds-neutral-110: #e9e9e9;
  --ds-neutral-140: #dcdcdc;
  --ds-neutral-150: #dadada;
  --ds-neutral-160: #d9d9d9;
  --ds-neutral-170: #d1d3d4;
  --ds-neutral-190: #ccd0d9;
  --ds-neutral-210: #c9c9c9;
  --ds-neutral-310: #b2b3b7;
  --ds-neutral-400: #cccccc;
  --ds-neutral-410: #c4c4c4;
  --ds-neutral-420: #979797;
  --ds-neutral-440: #8e8e93;
  --ds-neutral-450: #c2c2c2;
  --ds-neutral-500: #b2b2b2;
  --ds-neutral-530: #787880;
  --ds-neutral-550: #a8a8a8;
  --ds-neutral-580: #6f7183;
  --ds-neutral-600: #969696;
  --ds-neutral-610: #808080;
  --ds-neutral-620: #7c7c7c;
  --ds-neutral-650: #7f7f7f;
  --ds-neutral-700: #7a797c;
  --ds-neutral-750: #797775;
  --ds-neutral-760: #393738;
  --ds-neutral-800: #363636;
  --ds-neutral-850: #2c2c2c;
  --ds-neutral-860: #272727;
  --ds-neutral-900: #212121;
  --ds-neutral-910: #0b1216;
  --ds-neutral-930: #121212;
  --ds-neutral-950: #0a0606;
  --ds-neutral-970: #0d0d0d;
  --ds-neutral-1000: #000000;

  /* Blue */
  --ds-blue-0: #e9f4ff;
  --ds-blue-40: #eef6ff;
  --ds-blue-50: #dde1ff;
  --ds-blue-100: #d5e4ff;
  --ds-blue-150: #83b2e9;
  --ds-blue-200: #808cf3;
  --ds-blue-250: #3578c3;
  --ds-blue-300: #496fb7;
  --ds-blue-350: #2c6fef;
  --ds-blue-400: #2875c1;
  --ds-blue-450: #0075ff;
  --ds-blue-460: #3490ff;
  --ds-blue-500: #2d62db;
  --ds-blue-510: #0571eb;
  --ds-blue-550: #2757ff;
  --ds-blue-600: #3552e9;
  --ds-blue-630: #3556ff;
  --ds-blue-650: #0066ff;
  --ds-blue-690: #0057ff;
  --ds-blue-750: #3f52b5;
  --ds-blue-800: #424c82;
  --ds-blue-810: #2d333f;
  --ds-blue-900: #294e90;
  --ds-blue-950: #043bff;
  --ds-blue-1000: #001aff;

  /* Red */
  --ds-red-0: #fff4f4;
  --ds-red-50: #ffeff0;
  --ds-red-100: #ff616b;
  --ds-red-200: #fa5255;
  --ds-red-250: #eb4a4a;
  --ds-red-300: #ff3e4d;
  --ds-red-350: #ff4040;
  --ds-red-400: #ff3d3d;
  --ds-red-460: #fe5659;
  --ds-red-590: #ff2929;
  --ds-red-600: #de3542;
  --ds-red-620: #ff1c1c;
  --ds-red-650: #ff2727;
  --ds-red-700: #ff2525;
  --ds-red-750: #c03638;
  --ds-red-800: #ff1717;
  --ds-red-900: #ff0404;
  --ds-red-950: #ff0000;
  --ds-red-1000: #eb001b;

  /* Green */
  --ds-green-0: #71e545;
  --ds-green-100: #24ff89;
  --ds-green-200: #52ff00;
  --ds-green-250: #00ff29;
  --ds-green-350: #2cbb6d;
  --ds-green-440: #34c759;
  --ds-green-450: #36af6b;
  --ds-green-480: #22c62e;
  --ds-green-560: #00b352;
  --ds-green-590: #109f38;
  --ds-green-600: #009f45;
  --ds-green-650: #00c800;
  --ds-green-750: #1da61a;
  --ds-green-800: #04b40b;

  /* Purple */
  --ds-purple-0: #f7e2ff;
  --ds-purple-60: #f3eef8;
  --ds-purple-100: #e9dcff;
  --ds-purple-140: #d4daff;
  --ds-purple-150: #916dbf;
  --ds-purple-250: #d23bea;
  --ds-purple-300: #8763b6;
  --ds-purple-400: #9747ff;
  --ds-purple-450: #785bba;
  --ds-purple-540: #6661ff;
  --ds-purple-550: #6a5dd4;
  --ds-purple-600: #8a38f5;
  --ds-purple-640: #bf0aff;
  --ds-purple-750: #702acc;
  --ds-purple-900: #8f00ff;
  --ds-purple-1000: #3723bc;

  /* Yellow-Orange */
  --ds-yellow-0: #ffc13a;
  --ds-yellow-100: #ffc700;
  --ds-yellow-200: #ffaf00;
  --ds-yellow-280: #ffa36c;
  --ds-yellow-350: #f79e1b;
  --ds-yellow-360: #ff9500;
  --ds-yellow-400: #ff9a00;
  --ds-yellow-500: #e65f25;
  --ds-yellow-550: #f8882c;
  --ds-yellow-650: #ff6f00;
  --ds-yellow-750: #ff6100;
  --ds-yellow-800: #ff5f00;

  /* Teal */
  --ds-teal-0: #ccf0ff;
  --ds-teal-150: #88c8e9;
  --ds-teal-250: #0090e1;
  --ds-teal-330: #82b7d3;
  --ds-teal-400: #0091ce;
  --ds-teal-450: #00b1aa;
  --ds-teal-500: #0988bd;
  --ds-teal-550: #0798ca;
  --ds-teal-570: #009994;
  --ds-teal-650: #0d7dac;
  --ds-teal-750: #1b6d96;
  --ds-teal-800: #00465c;
  --ds-teal-900: #115065;
  --ds-teal-1000: #003754;

  /* Pink */
  --ds-pink-400: #e756b4;
  --ds-pink-500: #f133ae;

  /* ========================================
     TYPOGRAPHY
     SF Pro is system font on macOS/iOS.
     Fallback: -apple-system, system-ui, sans-serif
     ======================================== */
  --ds-font-display: -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --ds-font-text: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --ds-font-rounded: 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  --ds-font-mono: 'OCR A Std', 'Courier New', monospace;

  /* Font weights */
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-heavy: 800;

  /* ========================================
     LAYOUT CONSTANTS
     ======================================== */
  --ds-screen-width: 375px;
  --ds-content-width: 343px;
  --ds-narrow-width: 311px;
  --ds-status-bar-height: 56px;
  --ds-tab-bar-height: 83px;
}