/* =============================================================================
   tokens.css — the design system.

   ONE set of component styles, TWO surfaces. Everything below is a token;
   base.css and the component files only ever reference tokens, never a raw
   hex. Switching a surface is therefore a token swap, not a restyle.

     [data-surface="public"]   light  — the marketplace
     [data-surface="console"]  dark   — the company and admin console

   Why they differ, rather than one theme everywhere:

     The public surface is where owner-submitted car photos and dense price
     comparisons live. Photos shot on a phone in daylight, full of white sky
     and bright tarmac, look muddy against near-black; a light surface
     flatters exactly the images this marketplace actually receives. Every
     comparison site a Kosovar traveller has used is light, so it also spends
     less of the visitor's trust on unfamiliarity.

     The console is the opposite problem: long sessions, dense tables, no
     photography. Dark reduces glare and, usefully, makes it obvious at a
     glance whether you are looking at the shop or at the back office.

   Every colour pair below was measured against WCAG 2.1. No token that
   carries text falls under 4.5:1 on any surface it is used on. The numbers
   in comments are real measurements, not aspirations.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Brand — identical on both surfaces. This is what makes it one product.
     Values from the brand kit (rovo-brand/README.md): Rovo Navy for the logo,
     the bar and text; Rovo Gold as an accent only, never body text; Paper as
     the page. The logos themselves are in /brand/rovo.svg.
     --------------------------------------------------------------------------- */
  --brand-navy: #0b1b40;
  --brand-paper: #f6f4ef;
  --brand-gold: #c9a24b;
  --brand-gold-dark: #765a17;  /* gold as TEXT on light: 6.47 on white */
  --brand-gold-light: #d4ac5e; /* gold as TEXT on dark:  8.21 on console surface */

  /* Kosovo flag blue. Used for one thing only: the RKS band on the plate
     marker, which is how Rovo says where a car is. White on it: 7.46. */
  --flag-blue: #244aa5;

  /* ---------------------------------------------------------------------------
     One family, the brand's: Archivo. Body at its normal width; headlines,
     prices and plates at its semi-condensed width (font-stretch 87.5%), which
     keeps the tight, road-sign rhythm the layout was built on. Archivo covers
     every Albanian glyph (ë, ç). The wordmark is custom lettering and is
     never set in type.
     --------------------------------------------------------------------------- */
  --font-text: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --display-stretch: 87.5%;

  /* ---------------------------------------------------------------------------
     Type scale — 1.200 (minor third) from a 16px base. A modest ratio keeps a
     dense listing readable; a dramatic one would fight the information.
     --------------------------------------------------------------------------- */
  --text-xs: 0.75rem;    /* 12px — meta, captions */
  --text-sm: 0.875rem;   /* 14px — secondary, table cells */
  --text-base: 1rem;     /* 16px — body. Also the iOS no-zoom floor. */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.375rem;   /* 22px — card titles */
  --text-xl: 1.75rem;    /* 28px — section headings */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px — hero */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  /* Negative tracking at display sizes is what makes a neutral grotesque read
     as designed rather than as a default. */
  --tracking-display: -0.022em;
  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------------
     Spacing — a 4px base. Named by role, not by size, so a layout change does
     not mean renaming every token.
     --------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --container: 1200px;

  /* Touch target floor. iOS and Android both guide to 44px; WCAG 2.5.8
     floors at 24px. The larger number is the one that prevents mis-taps. */
  --tap: 44px;

  --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* =============================================================================
   PUBLIC SURFACE — light
   ============================================================================= */
[data-surface='public'] {
  --page: var(--brand-paper);
  --surface: #ffffff;
  --surface-2: #f1eee7;
  --surface-sunken: #e9e5dc;

  --line: rgba(11, 27, 64, 0.1);
  --line-strong: rgba(11, 27, 64, 0.18);

  /* Text in Rovo Navy. Measured: */
  --ink: var(--brand-navy); /* 16.87 on white, 15.35 on paper */
  --ink-2: #3d4766;  /*  9.16 on white, 8.34 on paper */
  --ink-3: #586174;  /*  6.22 on white, 5.66 on paper, 4.95 on sunken */

  --accent: var(--brand-gold-dark); /* gold as text, darkened to 6.47 */
  --accent-fill: var(--brand-gold); /* gold as a fill, with navy label: 7.80 */
  --accent-on-fill: var(--brand-navy);
  --accent-soft: rgba(201, 162, 75, 0.14);

  --ok: #166f49;      /* 6.17 on white */
  --ok-soft: rgba(22, 111, 73, 0.1);
  --warn: #8a5a10;    /* 5.91 on white */
  --warn-soft: rgba(138, 90, 16, 0.1);
  --bad: #b3261e;     /* 6.54 on white */
  --bad-soft: rgba(179, 38, 30, 0.08);

  --skeleton: rgba(14, 23, 38, 0.07);
  --skeleton-sheen: rgba(14, 23, 38, 0.035);

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.06);
  --shadow: 0 1px 2px rgba(14, 23, 38, 0.06), 0 8px 24px rgba(14, 23, 38, 0.06);
  --shadow-lg: 0 2px 4px rgba(14, 23, 38, 0.06), 0 18px 44px rgba(14, 23, 38, 0.1);

  color-scheme: light;
}

/* =============================================================================
   CONSOLE SURFACE

   Three tiers, so the console can grow without restyling:

     1. PRIMITIVES  raw values, named by what they are (navy-900, gold-500).
                    Only this block contains hex.
     2. SEMANTIC    named by job (--page, --surface, --ink-2, --accent). Both
                    themes redefine only this tier.
     3. COMPONENT   sizes for the app frame and controls (--topbar-h,
                    --control-h), defined in console.css from tier 2.

   Two themes. Night is the default; daylight is opt-in from the top bar and
   remembered per browser. The sidebar is navy in BOTH, so the console always
   reads as Rovo. Every text pair was measured; the ratios are in comments.
   ============================================================================= */

/* ---- 1. Primitives ------------------------------------------------------- */
[data-surface='console'] {
  --navy-950: #070d1a;
  --navy-900: #0b1b40;   /* Rovo Navy */
  --navy-850: #0b1b40;
  --navy-800: #172a4f;
  --navy-700: #1f365f;
  --navy-600: #29436f;
  --navy-500: #3a5486;

  --night-ink: #eef2fa;
  --night-ink-2: #bccae2;
  --night-ink-3: #a6b6d0;

  --paper-50: #f2f4f8;
  --paper-0: #ffffff;
  --paper-100: #eef2f7;
  --paper-200: #e2e8f0;
  --day-ink: #0e1726;
  --day-ink-2: #3d4a63;
  --day-ink-3: #566279;

  --gold-300: #ddb96f;
  --gold-500: #c9a24b;
  --gold-600: #a8842f;
  --gold-800: #765a17;
  --flag-blue-500: #244aa5;

  /* Sidebar: identical in both themes. */
  --side-bg: var(--navy-900);
  --side-ink: #edf1f7;       /* 16.52 on side */
  --side-ink-2: #a9b4c6;     /*  8.94 on side */
  --side-ink-3: #8592a8;     /*  5.36 on side */
  --side-hover: #121e36;
  --side-active: #17233b;    /* side-ink 13.83, side-ink-2 7.49 on it */
  --side-line: rgba(255, 255, 255, 0.08);
  --side-accent: #d4ac5e;    /*  8.79 on side */
}

/* ---- 2. Semantic: night (default) ----------------------------------------- */
[data-surface='console'] {
  --page: var(--navy-800);
  --surface: var(--navy-700);
  --surface-2: var(--navy-600);
  --surface-sunken: var(--navy-900);   /* inputs */
  --overlay: #1a2e54;                  /* drawers, palette, menus */

  --line: rgba(178, 198, 240, 0.14);
  --line-strong: rgba(178, 198, 240, 0.26);

  --ink: var(--night-ink);       /* 12.64 on page, 10.69 on surface, 8.80 on surface-2 */
  --ink-2: var(--night-ink-2);   /*  8.57 on page,  7.24 on surface, 5.96 on surface-2 */
  --ink-3: var(--night-ink-3);   /*  6.91 on page,  5.84 on surface, 4.81 on surface-2 */

  --accent: var(--gold-300);           /* 7.59 on page, 6.42 on surface */
  --accent-fill: var(--gold-500);
  --accent-on-fill: var(--navy-900);   /* 7.72 */
  --accent-soft: rgba(221, 185, 111, 0.16);
  --link: #9cbcf5;

  --ok: #6fd6a1;     /* 6.74 on surface */
  --ok-soft: rgba(111, 214, 161, 0.15);
  --warn: #f0ad66;   /* 6.21 on surface */
  --warn-soft: rgba(240, 173, 102, 0.15);
  --bad: #f39b96;    /* 5.68 on surface */
  --bad-soft: rgba(243, 155, 150, 0.14);

  --skeleton: rgba(178, 198, 240, 0.09);
  --skeleton-sheen: rgba(178, 198, 240, 0.15);

  --shadow-sm: 0 1px 2px rgba(3, 8, 20, 0.4);
  --shadow: 0 2px 10px rgba(3, 8, 20, 0.35);
  --shadow-lg: 0 24px 60px rgba(3, 8, 20, 0.55);

  /* Charts, validated against --surface: gold alone 5.00; blue/orange/aqua
     pass all-pairs (worst CVD dE 9.5). Gold is never mixed with them. */
  --series-gold: var(--gold-500);
  --series-1: #4a8fe8;
  --series-2: #df6730;
  --series-3: #20a879;
  --chart-grid: rgba(178, 198, 240, 0.12);
  --chart-base: rgba(178, 198, 240, 0.32);

  color-scheme: dark;
}

/* ---- 2. Semantic: daylight ------------------------------------------------- */
[data-surface='console'][data-theme='light'] {
  --page: var(--paper-50);
  --surface: var(--paper-0);
  --surface-2: var(--paper-100);
  --surface-sunken: var(--paper-0);
  --overlay: var(--paper-0);

  --line: rgba(14, 23, 38, 0.1);
  --line-strong: rgba(14, 23, 38, 0.2);

  --ink: var(--day-ink);       /* 16.31 on page, 17.96 on surface, 15.98 on surface-2 */
  --ink-2: var(--day-ink-2);   /*  8.09 on page,  8.91 on surface,  7.92 on surface-2 */
  --ink-3: var(--day-ink-3);   /*  5.58 on page,  6.14 on surface,  5.46 on surface-2 */

  --accent: var(--gold-800);           /* 5.88 on page, 6.47 on surface */
  --accent-fill: var(--gold-500);
  --accent-on-fill: var(--navy-900);
  --accent-soft: rgba(201, 162, 75, 0.16);
  --link: var(--flag-blue-500);        /* 7.34 on page */

  --ok: #166f49;     /* 6.17 on surface */
  --ok-soft: rgba(22, 111, 73, 0.1);
  --warn: #8a5a10;   /* 5.91 on surface */
  --warn-soft: rgba(138, 90, 16, 0.1);
  --bad: #b3261e;    /* 6.54 on surface */
  --bad-soft: rgba(179, 38, 30, 0.08);

  --skeleton: rgba(14, 23, 38, 0.07);
  --skeleton-sheen: rgba(14, 23, 38, 0.035);

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.06);
  --shadow: 0 2px 8px rgba(14, 23, 38, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 23, 38, 0.18);

  /* Charts on white: gold-600 3.50 alone; blue/orange/aqua pass all-pairs
     (worst CVD dE 9.2). Aqua is 2.82 on white, so every chart keeps its
     legend and table view (the validator's relief rule). */
  --series-gold: var(--gold-600);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --chart-grid: rgba(14, 23, 38, 0.08);
  --chart-base: rgba(14, 23, 38, 0.25);

  color-scheme: light;
}

/* The brand bar is dark on BOTH surfaces, so the product reads as one thing.
   Its own tokens, because on the light surface it is an inverted region. */
:root {
  --bar-bg: var(--brand-navy);
  --bar-ink: #edf1f7;       /* 16.52 on navy */
  --bar-ink-2: #a9b4c6;     /*  8.94 on navy */
  --bar-line: rgba(255, 255, 255, 0.1);
}