/* Source: Web/Web/public/clientProfileFiles/roobit/css/tokens.css — copied 2026-09-02 */
/**
 * Roobit design tokens
 * Hex/rgba values live here only. Other files in this folder consume var(--*).
 */

/* ── 1. Primitives ── */
:root {
  --primitive-white: #ffffff;
  --primitive-black: #000000;
  
  --primitive-green-400: #00ec00;
  --primitive-green-500: #00ec00;
  --primitive-green-600: #00b537;

  --primitive-red-500: #d12f28;
  --primitive-red-600: #ff453a;
  --primitive-red-bright: #ff0000;

  --primitive-yellow-500: #ff6d10;
  --primitive-orange-500: #ff9500;

  --primitive-purple-900: #241a49;
  --primitive-purple-800: #2d2358;
  --primitive-purple-700: #241749;
  --primitive-purple-600: #391763;
  --primitive-purple-500: #2b2555;
  --primitive-purple-deep: #0f0c23;
  --primitive-purple-input: #0d072f;
  --primitive-purple-landing: #231e47;

  --primitive-surface-dark: #0f1233e6;
  --primitive-surface-tab: #0c091c;
  --primitive-surface-nav-hover: #110d28;
  --primitive-textbox-bg: #0d0b17b0;

  --primitive-grey-500: #999999;
  --primitive-grey-400: #d5d5d5;
  --primitive-grey-300: #838296;
  --primitive-grey-200: #838294;
  --primitive-text-muted: #b5b4c9;
  --primitive-neutral-500: #858e93;
  --primitive-neutral-100: #f4f4f4;
  --primitive-neutral-200: #f3f3f3;
  --primitive-neutral-50: #f5f5f7;

  --primitive-accent: #6e5ce6;
  --primitive-info: #0084ff;
  --primitive-action-subtle: #e6fff1;
  --primitive-accent-subtle: #efe8ff;
  --primitive-on-action: #0b111f;

  --primitive-bg: #060f1f;
  --primitive-bg-subtle: #0b1525;
  --primitive-surface: #151f33;
  --primitive-surface-elevated: #1b2548;
  --primitive-surface-selected: #13294a;
  --primitive-border: #2a3557;
  --primitive-text: #edf2fa;
  --primitive-text-muted-semantic: #a8b2cb;

  --primitive-shadow-overlay: rgba(0, 0, 0, 0.19);
  --primitive-shadow-input: rgba(0, 0, 0, 0.16);

  /* Typography primitives (px) */
  --primitive-font-size-0: 0;
  --primitive-font-size-8: 8px;
  --primitive-font-size-9: 9px;
  --primitive-font-size-10: 10px;
  --primitive-font-size-11: 11px;
  --primitive-font-size-12: 12px;
  --primitive-font-size-13: 13px;
  --primitive-font-size-14: 14px;
  --primitive-font-size-15: 15px;
  --primitive-font-size-16: 16px;
  --primitive-font-size-17: 17px;
  --primitive-font-size-18: 18px;
  --primitive-font-size-19: 19px;
  --primitive-font-size-20: 20px;
  --primitive-font-size-21: 21px;
  --primitive-font-size-22: 22px;
  --primitive-font-size-23: 23px;
  --primitive-font-size-24: 24px;
  --primitive-font-size-25: 25px;
  --primitive-font-size-26: 26px;
  --primitive-font-size-27: 27px;
  --primitive-font-size-28: 28px;
  --primitive-font-size-29: 29px;
  --primitive-font-size-30: 30px;
  --primitive-font-size-31: 31px;
  --primitive-font-size-32: 32px;
  --primitive-font-size-33: 33px;
  --primitive-font-size-34: 34px;
  --primitive-font-size-35: 35px;
  --primitive-font-size-36: 36px;
  --primitive-font-size-37: 37px;
  --primitive-font-size-38: 38px;
  --primitive-font-size-39: 39px;
  --primitive-font-size-40: 40px;
  --primitive-font-size-41: 41px;
  --primitive-font-size-42: 42px;
  --primitive-font-size-43: 43px;
  --primitive-font-size-44: 44px;
  --primitive-font-size-45: 45px;
  --primitive-font-size-46: 46px;
  --primitive-font-size-47: 47px;
  --primitive-font-size-48: 48px;
  --primitive-font-size-49: 49px;
  --primitive-font-size-50: 50px;
  --primitive-font-size-51: 51px;
  --primitive-font-size-52: 52px;
  --primitive-font-size-53: 53px;
  --primitive-font-size-54: 54px;
  --primitive-font-size-180: 180px;

  /* Font weight primitives */
  --primitive-font-weight-300: 300;
  --primitive-font-weight-400: 400;
  --primitive-font-weight-500: 500;
  --primitive-font-weight-600: 600;
  --primitive-font-weight-700: 700;
  --primitive-font-weight-800: 800;

  /* Font stretch primitives */
  --primitive-font-stretch-normal: normal;

  /* Font style primitives */
  --primitive-font-style-normal: normal;
  --primitive-font-style-italic: italic;

  /* Line height primitives */
  --primitive-line-height-normal: normal;
  --primitive-line-height-089: 0.89;
  --primitive-line-height-125: 1.25;
  --primitive-line-height-133: 1.33;
  --primitive-line-height-143: 1.43;
  --primitive-line-height-155: 1.55;
  --primitive-line-height-160: 1.6;
  --primitive-line-height-167: 1.67;
  --primitive-line-height-178: 1.78;
  --primitive-line-height-179: 1.79;
  --primitive-line-height-209: 2.09;
  --primitive-line-height-279: 2.79;
  --primitive-line-height-286: 2.86;
  --primitive-line-height-291: 2.91;
  --primitive-line-height-350: 3.5;
  --primitive-line-height-2em: 2em;
  --primitive-line-height-0: 0;
  --primitive-line-height-1: 1;
  --primitive-line-height-12: 1.2;
  --primitive-line-height-128: 1.28;
  --primitive-line-height-13: 1.3;
  --primitive-line-height-135: 1.35;
  --primitive-line-height-14: 1.4;
  --primitive-line-height-145: 1.45;
  --primitive-line-height-15: 1.5;
  --primitive-line-height-163: 1.63;
  --primitive-line-height-176: 1.76;
  --primitive-line-height-193: 1.93;
  --primitive-line-height-267: 2.67;
  --primitive-line-height-3: 3;
  --primitive-line-height-px-0: 0px;
  --primitive-line-height-px-10: 10px;
  --primitive-line-height-px-12: 12px;
  --primitive-line-height-px-14: 14px;
  --primitive-line-height-px-16: 16px;
  --primitive-line-height-px-17: 17px;
  --primitive-line-height-px-18: 18px;
  --primitive-line-height-px-20: 20px;
  --primitive-line-height-px-22: 22px;
  --primitive-line-height-px-24: 24px;
  --primitive-line-height-px-26: 26px;
  --primitive-line-height-px-28: 28px;
  --primitive-line-height-px-30: 30px;
  --primitive-line-height-px-32: 32px;
  --primitive-line-height-px-34: 34px;
  --primitive-line-height-px-36: 36px;
  --primitive-line-height-px-38: 38px;
  --primitive-line-height-px-50: 50px;

  /* Letter spacing primitives */
  --primitive-letter-spacing-normal: normal;
  --primitive-letter-spacing-n032: -0.32px;
  --primitive-letter-spacing-n025: -0.25px;
  --primitive-letter-spacing-016: 0.16px;
  --primitive-letter-spacing-020: 0.2px;
  --primitive-letter-spacing-024: 0.24px;
  --primitive-letter-spacing-026: 0.26px;
  --primitive-letter-spacing-028: 0.28px;
  --primitive-letter-spacing-032: 0.32px;
  --primitive-letter-spacing-034: 0.34px;
  --primitive-letter-spacing-036: 0.36px;
  --primitive-letter-spacing-044: 0.44px;
  --primitive-letter-spacing-052: 0.52px;
  --primitive-letter-spacing-064: 0.64px;
  --primitive-letter-spacing-068: 0.68px;
  --primitive-letter-spacing-108: 1.08px;
  --primitive-letter-spacing-0: 0;
  --primitive-letter-spacing-n036: -0.36px;
  --primitive-letter-spacing-n034: -0.34px;
  --primitive-letter-spacing-n024neg: -0.24px;
  --primitive-letter-spacing-n020: -0.2px;
  --primitive-letter-spacing-n018: -0.18px;
  --primitive-letter-spacing-03: 0.3px;
  --primitive-letter-spacing-048: 0.48px;
  --primitive-letter-spacing-05: 0.5px;
  --primitive-letter-spacing-1px: 1px;
  --primitive-letter-spacing-2px: 2px;
  --primitive-letter-spacing-36: 3.6px;

  /* Border radius primitives */
  --primitive-border-radius-inherit: inherit;
  --primitive-border-radius-1: 1px;
  --primitive-border-radius-3: 3px;
  --primitive-border-radius-4: 4px;
  --primitive-border-radius-6: 6px;
  --primitive-border-radius-7: 7px;
  --primitive-border-radius-8: 8px;
  --primitive-border-radius-9: 9px;
  --primitive-border-radius-10: 10px;
  --primitive-border-radius-12: 12px;
  --primitive-border-radius-14: 14px;
  --primitive-border-radius-15: 15px;
  --primitive-border-radius-16: 16px;
  --primitive-border-radius-18: 18px;
  --primitive-border-radius-20: 20px;
  --primitive-border-radius-21: 21px;
  --primitive-border-radius-24: 24px;
  --primitive-border-radius-25: 25px;
  --primitive-border-radius-40: 40px;
  --primitive-border-radius-50: 50px;
  --primitive-border-radius-pill: 999px;

  /* Opacity primitives (unitless, 0–1) */
  --primitive-opacity-0: 0;
  --primitive-opacity-05: 0.05;
  --primitive-opacity-15: 0.15;
  --primitive-opacity-20: 0.2;
  --primitive-opacity-30: 0.3;
  --primitive-opacity-40: 0.4;
  --primitive-opacity-50: 0.5;
  --primitive-opacity-60: 0.6;
  --primitive-opacity-65: 0.65;
  --primitive-opacity-70: 0.7;
  --primitive-opacity-72: 0.72;
  --primitive-opacity-75: 0.75;
  --primitive-opacity-80: 0.8;
  --primitive-opacity-85: 0.85;
  --primitive-opacity-90: 0.9;
  --primitive-opacity-92: 0.92;
  --primitive-opacity-95: 0.95;
  --primitive-opacity-100: 1;
}

/* ── 2. Semantic tokens ── */
:root {
  --color-action: var(--primitive-green-500);
  --color-action-hover: var(--primitive-green-600);
  --color-action-subtle: var(--primitive-action-subtle);
  --color-accent: var(--primitive-accent);
  --color-accent-subtle: var(--primitive-accent-subtle);

  --color-success: var(--primitive-green-500);
  --color-warning: var(--primitive-orange-500);
  --color-danger: var(--primitive-red-600);
  --color-info: var(--primitive-info);
  --color-review: var(--primitive-accent);
  --color-neutral: var(--primitive-neutral-500);
  --color-market-up: var(--primitive-green-500);
  --color-market-down: var(--primitive-red-600);

  --color-bg: var(--primitive-bg);
  --color-bg-subtle: var(--primitive-bg-subtle);
  --color-surface: var(--primitive-surface);
  --color-surface-elevated: var(--primitive-surface-elevated);
  --color-surface-selected: var(--primitive-surface-selected);
  --color-border: var(--primitive-border);
  --color-text: var(--primitive-text);
  --color-text-muted: var(--primitive-text-muted-semantic);
  --color-text-inverse: var(--primitive-white);

  --color-on-action: var(--primitive-on-action);
  --color-on-danger: var(--primitive-white);
  --color-on-accent: var(--primitive-white);

  --color-shadow-overlay: var(--primitive-shadow-overlay);
  --color-shadow-input: var(--primitive-shadow-input);

  --ui-color-action: var(--color-action);
  --ui-color-action-hover: var(--color-action-hover);
  --ui-color-action-subtle: var(--color-action-subtle);
  --ui-color-accent: var(--color-accent);
  --ui-color-accent-subtle: var(--color-accent-subtle);
  --ui-color-success: var(--color-success);
  --ui-color-warning: var(--color-warning);

  --radius-inherit: var(--primitive-border-radius-inherit);
  --radius-2xs: var(--primitive-border-radius-1);
  --radius-xs: var(--primitive-border-radius-3);
  --radius-sm: var(--primitive-border-radius-4);
  --radius-sm-md: var(--primitive-border-radius-6);
  --radius-compact: var(--primitive-border-radius-7);
  --radius-md: var(--primitive-border-radius-8);
  --radius-button: var(--primitive-border-radius-9);
  --radius-input: var(--primitive-border-radius-8);
  --radius-lg: var(--primitive-border-radius-12);
  --radius-xl: var(--primitive-border-radius-14);
  --radius-md-lg: var(--primitive-border-radius-15);
  --radius-card: var(--primitive-border-radius-16);
  --radius-panel: var(--primitive-border-radius-18);
  --radius-container: var(--primitive-border-radius-20);
  --radius-2xl: var(--primitive-border-radius-21);
  --radius-banner: var(--primitive-border-radius-24);
  --radius-pill-lg: var(--primitive-border-radius-25);
  --radius-feature: var(--primitive-border-radius-40);
  --radius-round-xl: var(--primitive-border-radius-50);
  --radius-pill: var(--primitive-border-radius-pill);
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;

  /* Typography semantic */
  --font-size-hidden: var(--primitive-font-size-0);
  --font-size-2xs: var(--primitive-font-size-8);
  --font-size-xs: var(--primitive-font-size-9);
  --font-size-micro: var(--primitive-font-size-10);
  --font-size-micro-sm: var(--primitive-font-size-11);
  --font-size-sm: var(--primitive-font-size-12);
  --font-size-sm-md: var(--primitive-font-size-13);
  --font-size-body: var(--primitive-font-size-14);
  --font-size-body-md: var(--primitive-font-size-15);
  --font-size-body-lg: var(--primitive-font-size-16);
  --font-size-title-sm: var(--primitive-font-size-17);
  --font-size-title-md: var(--primitive-font-size-18);
  --font-size-title-lg: var(--primitive-font-size-22);
  --font-size-title-xl: var(--primitive-font-size-23);
  --font-size-heading-sm: var(--primitive-font-size-24);
  --font-size-heading-base: var(--primitive-font-size-25);
  --font-size-heading-md: var(--primitive-font-size-26);
  --font-size-heading-lg: var(--primitive-font-size-27);
  --font-size-heading-xl: var(--primitive-font-size-32);
  --font-size-display-lg: var(--primitive-font-size-34);
  --font-size-display-md: var(--primitive-font-size-40);
  --font-size-display-2xl: var(--primitive-font-size-45);
  --font-size-display-3xl: var(--primitive-font-size-50);
  --font-size-display-xl: var(--primitive-font-size-54);
  --font-size-display-hero: var(--primitive-font-size-180);

  --font-weight-light: var(--primitive-font-weight-300);
  --font-weight-regular: var(--primitive-font-weight-400);
  --font-weight-medium: var(--primitive-font-weight-500);
  --font-weight-semibold: var(--primitive-font-weight-600);
  --font-weight-bold: var(--primitive-font-weight-700);
  --font-weight-extrabold: var(--primitive-font-weight-800);

  --font-stretch-normal: var(--primitive-font-stretch-normal);

  --font-style-normal: var(--primitive-font-style-normal);
  --font-style-italic: var(--primitive-font-style-italic);

  --line-height-normal: var(--primitive-line-height-normal);
  --line-height-tight: var(--primitive-line-height-089);
  --line-height-snug: var(--primitive-line-height-125);
  --line-height-compact: var(--primitive-line-height-133);
  --line-height-body-compact: var(--primitive-line-height-143);
  --line-height-relaxed: var(--primitive-line-height-155);
  --line-height-relaxed-md: var(--primitive-line-height-160);
  --line-height-loose: var(--primitive-line-height-167);
  --line-height-heading: var(--primitive-line-height-178);
  --line-height-heading-sm: var(--primitive-line-height-179);
  --line-height-spacious: var(--primitive-line-height-209);
  --line-height-xl: var(--primitive-line-height-279);
  --line-height-2xl: var(--primitive-line-height-286);
  --line-height-3xl: var(--primitive-line-height-291);
  --line-height-display: var(--primitive-line-height-350);
  --line-height-double: var(--primitive-line-height-2em);
  --line-height-unit: var(--primitive-line-height-1);
  --line-height-ratio-12: var(--primitive-line-height-12);
  --line-height-ratio-128: var(--primitive-line-height-128);
  --line-height-ratio-13: var(--primitive-line-height-13);
  --line-height-ratio-135: var(--primitive-line-height-135);
  --line-height-ratio-14: var(--primitive-line-height-14);
  --line-height-ratio-145: var(--primitive-line-height-145);
  --line-height-ratio-15: var(--primitive-line-height-15);
  --line-height-ratio-163: var(--primitive-line-height-163);
  --line-height-ratio-176: var(--primitive-line-height-176);
  --line-height-ratio-193: var(--primitive-line-height-193);
  --line-height-ratio-267: var(--primitive-line-height-267);
  --line-height-ratio-3: var(--primitive-line-height-3);
  --line-height-fixed-0: var(--primitive-line-height-px-0);
  --line-height-fixed-10: var(--primitive-line-height-px-10);
  --line-height-fixed-12: var(--primitive-line-height-px-12);
  --line-height-fixed-14: var(--primitive-line-height-px-14);
  --line-height-fixed-16: var(--primitive-line-height-px-16);
  --line-height-fixed-17: var(--primitive-line-height-px-17);
  --line-height-fixed-18: var(--primitive-line-height-px-18);
  --line-height-fixed-20: var(--primitive-line-height-px-20);
  --line-height-fixed-22: var(--primitive-line-height-px-22);
  --line-height-fixed-24: var(--primitive-line-height-px-24);
  --line-height-fixed-26: var(--primitive-line-height-px-26);
  --line-height-fixed-28: var(--primitive-line-height-px-28);
  --line-height-fixed-30: var(--primitive-line-height-px-30);
  --line-height-fixed-32: var(--primitive-line-height-px-32);
  --line-height-fixed-34: var(--primitive-line-height-px-34);
  --line-height-fixed-36: var(--primitive-line-height-px-36);
  --line-height-fixed-38: var(--primitive-line-height-px-38);
  --line-height-fixed-50: var(--primitive-line-height-px-50);

  --letter-spacing-normal: var(--primitive-letter-spacing-normal);
  --letter-spacing-tight-negative: var(--primitive-letter-spacing-n032);
  --letter-spacing-tight-negative-sm: var(--primitive-letter-spacing-n025);
  --letter-spacing-fine: var(--primitive-letter-spacing-016);
  --letter-spacing-micro: var(--primitive-letter-spacing-020);
  --letter-spacing-tighter: var(--primitive-letter-spacing-024);
  --letter-spacing-tight: var(--primitive-letter-spacing-026);
  --letter-spacing-body: var(--primitive-letter-spacing-028);
  --letter-spacing-medium-sm: var(--primitive-letter-spacing-032);
  --letter-spacing-medium: var(--primitive-letter-spacing-034);
  --letter-spacing-medium-lg: var(--primitive-letter-spacing-036);
  --letter-spacing-wide: var(--primitive-letter-spacing-044);
  --letter-spacing-wide-md: var(--primitive-letter-spacing-052);
  --letter-spacing-wide-lg: var(--primitive-letter-spacing-064);
  --letter-spacing-display-lg: var(--primitive-letter-spacing-068);
  --letter-spacing-display-xl: var(--primitive-letter-spacing-108);
  --letter-spacing-none: var(--primitive-letter-spacing-0);
  --letter-spacing-tight-negative-md: var(--primitive-letter-spacing-n036);
  --letter-spacing-tight-negative-lg: var(--primitive-letter-spacing-n034);
  --letter-spacing-tight-negative-xs: var(--primitive-letter-spacing-n024neg);
  --letter-spacing-tight-negative-2xs: var(--primitive-letter-spacing-n020);
  --letter-spacing-subtle-negative: var(--primitive-letter-spacing-n018);
  --letter-spacing-loose: var(--primitive-letter-spacing-03);
  --letter-spacing-accent: var(--primitive-letter-spacing-048);
  --letter-spacing-extra: var(--primitive-letter-spacing-05);
  --letter-spacing-pixel: var(--primitive-letter-spacing-1px);
  --letter-spacing-wide-xl: var(--primitive-letter-spacing-2px);
  --letter-spacing-display-sm: var(--primitive-letter-spacing-36);

  --opacity-hidden: var(--primitive-opacity-0); /* Gizli element */
  --opacity-ghost: var(--primitive-opacity-05); /* Ayırıcı çizgi / hayalet arka plan */
  --opacity-dim: var(--primitive-opacity-15); /* Order book depth bar */
  --opacity-faint: var(--primitive-opacity-20); /* Çok hafif solukluk */
  --opacity-light: var(--primitive-opacity-30); /* Landing animasyonları */
  --opacity-subtle: var(--primitive-opacity-40); /* Hafif soluk element */
  --opacity-disabled: var(--primitive-opacity-50); /* Disabled input/buton */
  --opacity-medium: var(--primitive-opacity-60); /* Orta solukluk */
  --opacity-muted-strong: var(--primitive-opacity-65); /* Güçlü muted */
  --opacity-muted: var(--primitive-opacity-70); /* Soluk metin/ikon */
  --opacity-placeholder: var(--primitive-opacity-72); /* Placeholder metin */
  --opacity-semisoft: var(--primitive-opacity-75); /* Yarı yumuşak opaklık */
  --opacity-soft: var(--primitive-opacity-80); /* Neredeyse opak */
  --opacity-overlay: var(--primitive-opacity-85); /* Popup/header overlay */
  --opacity-strong: var(--primitive-opacity-90); /* Yüksek opaklık */
  --opacity-near-opaque: var(--primitive-opacity-92); /* Çok yüksek opaklık */
  --opacity-heavy: var(--primitive-opacity-95); /* Ağır overlay */
  --opacity-opaque: var(--primitive-opacity-100); /* Tam opak */
}

/* ── 3. Theme pairs (mapped by theme.css on html.dark-theme / .light-theme) ── */
:root {
  --white-dark: var(--primitive-white);
  --white-light: var(--primitive-purple-800);

  --blue-grey-dark: var(--primitive-white);
  --blue-grey-light: var(--primitive-grey-300);

  --grey-dark: var(--primitive-grey-400);
  --grey-light: var(--primitive-purple-800);

  --card-dark: var(--primitive-purple-600);
  --card-light: var(--primitive-white);

  --purple-grey-dark: var(--primitive-neutral-100);
  --purple-grey-light: var(--primitive-purple-700);

  --view-dropdown-bg-color-dark: var(--primitive-grey-300);
  --view-dropdown-bg-color-light: var(--primitive-white);

  --footer-dark: unset;
  --footer-light: var(--primitive-neutral-100);

  --footer-item-text-dark: var(--primitive-white);
  --footer-item-text-light: var(--primitive-purple-800);

  --dropdown-bg-color-dark: var(--primitive-purple-700);
  --dropdown-bg-color-light: var(--primitive-neutral-100);

  --orderbook-text-color-dark: var(--grey);
  --orderbook-text-color-light: var(--primitive-purple-700);

  --footer-icon-dark: var(--primitive-white);
  --footer-icon-light: var(--primitive-purple-800);

  --dark-blue-grey-dark: var(--primitive-purple-800);
  --dark-blue-grey-light: var(--primitive-neutral-50);

  --area-bgcolor-dark: var(--primitive-surface-dark);
  --area-bgcolor-light: var(--primitive-white);

  --area-bgcolor-dark-2: var(--primitive-surface-dark);
  --area-bgcolor-light-2: var(--color-action);

  --grid-text-color-dark: var(--color-action);
  --grid-text-color-light: var(--primitive-purple-800);

  --area-bgcolor-puredark: var(--primitive-surface-dark);

  --area-bgcolor-dark-3: var(--primitive-surface-dark);
  --area-bgcolor-light-3: var(--primitive-neutral-100);

  --navbar-item-bg-dark: var(--primitive-purple-900);
  --navbar-item-bg-light: var(--primitive-neutral-100);

  --port-gore-dark: var(--primitive-purple-900);
  --port-gore-light: var(--primitive-white);

  --black-dark: var(--primitive-black);
  --black-light: var(--primitive-white);

  --landingpage-header-dark: var(--primitive-purple-landing);
  --landingpage-header-light: var(--primitive-shadow-overlay);

  --text-color-dark: var(--color-action);
  --text-color-light: var(--primitive-white);

  --input-bg-dark: var(--primitive-white);
  --input-bg-light: var(--primitive-neutral-200);
}

/* ── 4. Brand assets & component-specific tokens ── */
:root {
  --bg-body-quick-buy-image: url(../img/fast-crypto-buy-sell/fast-crypto-buy.webp);
  --bg-body-quick-sell-image: url(../img/fast-crypto-buy-sell/fast-crypto-sell.webp);

  --tab-bg-color: var(--primitive-surface-tab);
  --nav-item-hover-bg: var(--primitive-surface-nav-hover);
  --nav-item-active-bg: var(--primitive-surface-nav-hover);

  --textbox-bg-color: var(--primitive-textbox-bg);
  --textbox-purple-bg-color: var(--primitive-purple-input);
  --textbox-text-color: var(--primitive-text-muted);

  --bs-body-bg: transparent !important;
  --bs-body-color: var(--primitive-white) !important;
}

/* ── 5. Legacy aliases (used across app CSS & utility classes) ── */
:root {
  --bright-green: var(--color-action); /* deprecated: use --color-action */
  --v19-color-action: var(--color-action);

  --grey: var(--primitive-grey-500);
  --bright-red: var(--primitive-red-500);
  --much-brighter-red: var(--primitive-red-bright);
  --bright-yellow: var(--primitive-yellow-500);
  --dark-purple: var(--primitive-purple-500);
  --ktf-input-purple: var(--primitive-purple-deep);
  --border-grey: var(--primitive-grey-200);
}

/* ── 6. NUI tokens (roobit_color_tokens_4_pages_v2) ──
   Primitives + theme-independent semantics here.
   Theme-aware surface/text runtime vars → theme.css (.light-theme / .dark-theme). */
:root {
  /* NUI primitives — core brand palette */
  --nui-primitive-green: #00e15a;
  --nui-primitive-light-green: #00e15a;
  --nui-primitive-red: #db3a44;
  --nui-primitive-text-primary: #071044;
  --nui-primitive-text-secondary: #27315f;
  --nui-primitive-text-muted: #8a8e9a;
  --nui-primitive-light-input-text: #071044;
  --nui-primitive-dark-input-text: #f4f7fb;
  --nui-primitive-light-input-border: #e5e7ed;
  --nui-primitive-dark-input-border: #172538;
  --nui-primitive-light-tab-border: #d9dee8;
  --nui-primitive-dark-tab-border: #263a52;
  --nui-primitive-light-input-bg: #ffffff;
  --nui-primitive-dark-input-bg: #0b192b;

  /* NUI primitives — dark theme surfaces */
  --nui-primitive-dark-menu: #010f21;
  --nui-primitive-dark-page: #0b192b;
  --nui-primitive-dark-card: #0e1f32;
  --nui-primitive-dark-border: #172538;
  --nui-primitive-dark-heading: #97a7af;
  --nui-primitive-dark-footer: #04101f;

  /* NUI primitives — light theme surfaces */
  --nui-primitive-light-menu: #ffffff;
  --nui-primitive-light-page: #f8f9fc;
  --nui-primitive-light-card: #fefefe;
  --nui-primitive-light-border: #e5e7ed;
  --nui-primitive-light-heading: #0f1035;
  --nui-primitive-light-footer: #fbfcfc;

  /* NUI primitives — semantic status colors */
  --nui-primitive-semantic-neutral: #667085;
  --nui-primitive-semantic-review: #6d5dfb;
  --nui-primitive-semantic-info: #2d8cff;
  --nui-primitive-warning-bg: #fff3e4;
  --nui-primitive-warning-border: #ffd9a6;
  --nui-primitive-warning-text: #9a4e00;

  /* NUI primitives — typography (Inter 400 / 500 / 600) */
  --nui-primitive-font-family-ui: Inter, system-ui, sans-serif;
  --nui-primitive-font-weight-400: 400;
  --nui-primitive-font-weight-500: 500;
  --nui-primitive-font-weight-600: 600;
  --nui-primitive-font-synthesis: none;
  --nui-primitive-font-variant-numeric-tabular: tabular-nums;
}

:root {
  /* NUI semantic — action & market colors */
  --nui-color-action: var(--nui-primitive-green);
  --nui-color-market-up: var(--nui-primitive-light-green);
  --nui-color-danger: var(--nui-primitive-red);
  --nui-color-market-down: var(--nui-primitive-red);

  /* NUI semantic — status colors */
  --nui-semantic-neutral: var(--nui-primitive-semantic-neutral);
  --nui-semantic-review: var(--nui-primitive-semantic-review);
  --nui-semantic-info: var(--nui-primitive-semantic-info);
  --nui-warning-bg: var(--nui-primitive-warning-bg);
  --nui-warning-border: var(--nui-primitive-warning-border);
  --nui-warning-text: var(--nui-primitive-warning-text);

  /* NUI semantic — typography */
  --nui-font-family-ui: var(--nui-primitive-font-family-ui);
  --nui-font-weight-body: var(--nui-primitive-font-weight-400);
  --nui-font-weight-label: var(--nui-primitive-font-weight-500);
  --nui-font-weight-value: var(--nui-primitive-font-weight-600);
  --nui-font-synthesis: var(--nui-primitive-font-synthesis);
  --nui-font-variant-numeric-tabular: var(--nui-primitive-font-variant-numeric-tabular);
  --nui-font-size-tab: var(--primitive-font-size-18);
  --nui-line-height-tab: var(--primitive-line-height-px-24);

  /* NUI semantic — radius */
  --nui-radius-wrapper: var(--primitive-border-radius-10);
  --nui-radius-panel: var(--primitive-border-radius-18);

  /* NUI semantic — border */
  --nui-border-width-style-wrapper: 1px solid;
  --nui-border-color-wrapper: var(--nui-surface-border);
  --nui-border-width-style-panel: 1px solid;
  --nui-border-color-panel: var(--nui-surface-border);

  /* NUI semantic — dropdown */
  --nui-dropdown-shadow: 0 22px 60px rgba(7, 16, 68, 0.18);
  --nui-card-shadow: 0 24px 70px rgba(12, 20, 45, 0.08), 0 2px 8px rgba(12, 20, 45, 0.04);
  --nui-dropdown-option-hover-bg: color-mix(in srgb, var(--nui-color-action) 8%, transparent);
  --nui-border-width-style-tab: 1px solid;
  --nui-border-color-tab: var(--nui-surface-tab-border);
}