/*
 * RATELi CFI Theme — tokens.css
 * Every colour, size, space, radius, duration and layer is declared here and nowhere else.
 * tests/arch.php refuses a raw hex colour in any other stylesheet or template.
 * Rebranding is this one file.
 */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/comfortaa-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/dm-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* ---- Accent — the signature. CUSTOMISATION POINT: --color-accent */
  --color-accent: #E85D04;
  --color-accent-deep: #C44D00;
  --color-accent-bright: #FF6B1A;
  --color-accent-text: #FF7A2E;           /* accent used as text on dark grounds */
  --color-accent-wash: rgba(232, 93, 4, 0.12);
  --color-accent-wash-strong: rgba(232, 93, 4, 0.2);
  --color-accent-edge: rgba(232, 93, 4, 0.34);
  --color-accent-grid: rgba(232, 93, 4, 0.055);
  --color-on-accent: #FFFFFF;             /* large/bold text on accent fills */
  --color-scrim: rgba(10, 16, 28, 0.78);    /* dark glass behind white text on images, same in both themes */
  --hover-sheen: rgba(255, 255, 255, 0.16);  /* neutral light overlay on solid buttons when hovered (public site) */
  --shadow-lift: 0 6px 18px rgba(10, 16, 28, 0.35);
  --color-accent-fill: #B84600;
  /* Secondary colour: deep teal. Calm support for the orange (secondary buttons, info, links in card headers). */
  --color-secondary: #2E8B8B; --color-secondary-text: #4FB8B5; --color-secondary-fill: #1F6F70;
  --color-secondary-wash: rgba(79, 184, 181, 0.12); --color-secondary-edge: rgba(79, 184, 181, 0.4);           /* accent fill behind SMALL white text (tabs, badges, counts): 5.4:1 */

  /* ---- Surfaces and text (dark is brand-native) */
  --color-base: #0A0A0A;
  --color-surface: #141824;
  --color-surface-2: #1A2030;
  --color-surface-3: #1E2536;
  --color-section-alt: rgba(232, 93, 4, 0.035);
  --color-text-primary: #F3F6FA;
  /* Payment card artwork (checkout, card payment page): card-network colours, the same in both themes. */
  --card-navy-1: #1A1F71; --card-navy-2: #2A3BB0; --card-navy-3: #0B0F45;
  --card-chip-1: #F1D58A; --card-chip-2: #B98F36; --card-ink: #FFFFFF;
  --card-visa-gold: #F7B600; --card-mc-red: #EB001B; --card-mc-yellow: #F79E1B; --card-mc-mix: #FF5F00;
  /* Brightest text: menu items, headings and titles. The glow only exists in dark mode. */
  --color-text-bright: #FFFFFF;
  --text-glow: 0 0 14px rgba(255, 255, 255, 0.28);
  --color-nav-text: var(--color-text-bright);
  --nav-text-glow: var(--text-glow);
  --color-text-secondary: #BAC3CE;
  --color-text-muted: #8C96A3;
  --color-hairline: rgba(240, 246, 252, 0.09);
  --color-hairline-strong: rgba(240, 246, 252, 0.18);
  --color-card-border: rgba(240, 246, 252, 0.10);
  --color-overlay: rgba(4, 6, 12, 0.76);
  --color-nav-glass: rgba(10, 10, 10, 0.8);
  --color-shot-chrome: #0F131C;
  --color-lightbox: rgba(4, 6, 12, 0.94);

  /* ---- Atmosphere */
  --color-atmosphere-top: rgba(232, 93, 4, 0.085);
  --color-atmosphere-lift: rgba(240, 246, 252, 0.045);
  --color-atmosphere-edge: rgba(0, 0, 0, 0.16);

  /* ---- Chart series (categorical, fixed order; dataviz reference palette, dark steps). Never status colours. */
  --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70; --series-4: #C98500; --series-5: #D55181; --series-6: #9085E9; --series-other: #6B7280;
  /* ---- Semantic */
  --color-info: #4FB8B5;                  /* info = the secondary teal */
  --color-premium: #E0B236;
  --color-success: #4ACB60;
  --color-whatsapp: #25D366;              /* WhatsApp brand green (its icon only) */
  --color-warning: #E0A93A;
  --color-danger: #FF6B61;
  --color-on-danger: #1B0604;             /* text on solid danger buttons */
  --color-on-status: #07110C;             /* text on solid success / info buttons */
  --color-info-wash: rgba(79, 184, 181, 0.12);
  --color-premium-wash: rgba(224, 178, 54, 0.12);
  --color-success-wash: rgba(74, 203, 96, 0.12);
  --color-warning-wash: rgba(224, 169, 58, 0.14);
  --color-danger-wash: rgba(255, 107, 97, 0.12);

  /* ---- Form controls — named for the job */
  --color-control: var(--color-surface-3);
  --color-control-border: var(--color-hairline-strong);
  --color-control-invalid: var(--color-danger);

  /* ---- Product accent for this division */
  --product-guard: #A78BFA;

  /* ---- Trace graph node kinds */
  --trace-victim: var(--color-info);
  --trace-suspect: var(--color-danger);
  --trace-intermediary: var(--color-warning);
  --trace-exchange: var(--color-success);
  --trace-mixer: var(--product-guard);
  --trace-service: var(--color-premium);
  --trace-unknown: var(--color-text-muted);

  /* ---- Typography. Display = headings; brand = the RATELi wordmark only. */
  --font-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: 'Comfortaa', ui-rounded, system-ui, sans-serif;
  --font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  /* Printed slips (ticket confirmation): always ink on white, whatever the screen theme. */
  --print-paper: #FFFFFF; --print-ink: #111111; --print-line: #CCCCCC; --print-rule: #999999; --print-tint: #E9F7EF;
  /* Figures: amounts, prices, counters, references. DM Sans has no tabular (equal-width) digits, Plus Jakarta Sans does. See font.md. */
  --font-figures: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5625rem;
  --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  --text-4xl: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);
  --text-5xl: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem);
  --text-6xl: clamp(2.6rem, 1.5rem + 4.8vw, 4.9rem);
  --text-7xl: clamp(2.75rem, 0.9rem + 8.2vw, 7rem);

  --leading-none: 1; --leading-tight: 1.08; --leading-snug: 1.3; --leading-normal: 1.62; --leading-relaxed: 1.75;
  --tracking-display: -0.022em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.14em;

  /* ---- Space. CUSTOMISATION POINT: --space-unit */
  --space-unit: 4px;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --space-20: calc(var(--space-unit) * 20);
  --space-24: calc(var(--space-unit) * 24);
  --space-32: calc(var(--space-unit) * 32);
  --space-section: clamp(3.75rem, 2.25rem + 4.4vw, 6.5rem);
  --space-section-tight: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);

  /* ---- Layout. CUSTOMISATION POINTS: --container-max, --sidebar-width */
  --container-max: 1360px;
  --container-narrow: 768px;
  --container-article: 760px;
  --container-wide: 1600px;
  --container-gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --nav-height: 72px;
  --nav-height-mobile: 62px;
  --sidebar-width: 268px;
  --touch-target: 44px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 26px; --radius-full: 9999px;

  /* ---- Icon sizes: one scale everywhere */
  --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-tile: 48px; --icon-tile-sm: 36px;

  /* ---- Depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.44);
  --shadow-glow: 0 0 34px rgba(232, 93, 4, 0.40);
  --shadow-glow-sm: 0 0 16px rgba(232, 93, 4, 0.30);
  --focus-ring: 0 0 0 3px var(--color-base), 0 0 0 5px var(--color-accent-bright);

  /* ---- Motion: one language — quick, soft, never bouncy */
  --duration-instant: 100ms; --duration-fast: 180ms; --duration-normal: 280ms; --duration-slow: 520ms; --duration-slower: 900ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger-step: 70ms;

  /* ---- Layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 1000; --z-dropdown: 1100; --z-drawer: 1200; --z-modal: 1300; --z-toast: 1400;
}

/* Light theme: clean white, near-black text, confident borders, minimal shadow. */
[data-theme='light'] {
  --series-1: #2A78D6; --series-2: #EB6834; --series-3: #1BAF7A; --series-4: #EDA100; --series-5: #E87BA4; --series-6: #4A3AA7; --series-other: #9CA3AF;
  color-scheme: light;
  --color-accent-text: #B84600;
  --color-accent-wash: rgba(232, 93, 4, 0.08);
  --color-accent-wash-strong: rgba(232, 93, 4, 0.14);
  --color-accent-edge: rgba(184, 70, 0, 0.34);
  --color-accent-grid: rgba(232, 93, 4, 0.05);

  --color-base: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F6F9;
  --color-surface-3: #FFFFFF;
  --color-section-alt: #F7F8FA;
  --color-text-primary: #0A101C;
  --color-text-bright: #05080F;
  --text-glow: none;
  --color-text-secondary: #2C3645;
  --color-text-muted: #4B5563;
  --color-hairline: rgba(10, 16, 28, 0.09);
  --color-hairline-strong: rgba(10, 16, 28, 0.2);
  --color-card-border: rgba(10, 16, 28, 0.12);
  --color-overlay: rgba(10, 16, 28, 0.5);
  --color-nav-glass: rgba(255, 255, 255, 0.9);
  --color-shot-chrome: #E9EDF3;
  --color-lightbox: rgba(10, 16, 28, 0.92);

  --color-atmosphere-top: rgba(232, 93, 4, 0.04);
  --color-atmosphere-lift: rgba(255, 255, 255, 0);
  --color-atmosphere-edge: rgba(255, 255, 255, 0);

  --color-info: #1F6F70;
  --color-secondary: #1F6F70; --color-secondary-text: #1F6F70; --color-secondary-wash: rgba(31, 111, 112, 0.08); --color-secondary-edge: rgba(31, 111, 112, 0.34);
  --color-premium: #7A5C06;
  --color-success: #1F6E33;
  --color-whatsapp: #128C3E;              /* deeper WhatsApp green: 4.3:1 on the light surface */
  --color-warning: #7D5100;
  --color-danger: #B42318;
  --color-on-danger: #FFFFFF;
  --color-on-status: #FFFFFF;
  --color-info-wash: rgba(31, 111, 112, 0.08);
  --color-premium-wash: rgba(122, 92, 6, 0.09);
  --color-success-wash: rgba(31, 110, 51, 0.08);
  --color-warning-wash: rgba(125, 81, 0, 0.09);
  --color-danger-wash: rgba(180, 35, 24, 0.07);

  --product-guard: #6D28D9;

  --shadow-sm: 0 1px 2px rgba(10, 16, 28, 0.05);
  --shadow-md: 0 4px 14px rgba(10, 16, 28, 0.06);
  --shadow-lg: 0 16px 40px rgba(10, 16, 28, 0.09);
  --shadow-glow: 0 8px 28px rgba(232, 93, 4, 0.22);
  --shadow-glow-sm: 0 4px 14px rgba(232, 93, 4, 0.2);
  --focus-ring: 0 0 0 3px var(--color-base), 0 0 0 5px var(--color-accent-deep);
}

/* Print: black on white regardless of theme. */
@media print {
  :root, [data-theme='light'] {
  --series-1: #2A78D6; --series-2: #EB6834; --series-3: #1BAF7A; --series-4: #EDA100; --series-5: #E87BA4; --series-6: #4A3AA7; --series-other: #9CA3AF;
    --color-base: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #FFFFFF; --color-surface-3: #FFFFFF;
    --color-text-primary: #000000; --color-text-secondary: #222222; --color-text-muted: #555555; --color-text-bright: #000000; --text-glow: none;
    --color-hairline: #DDDDDD; --color-hairline-strong: #BBBBBB; --color-accent-text: #BD4900;
  }
}