/* ===========================================================================
   Zhopwe design tokens
   ===========================================================================
   One source of truth for colour, type, space, radius, elevation and motion.
   Everything else in the system references these, so a brand change is a change
   here and nowhere else.

   The palette is built around a deep jade primary and a warm amber accent:
   jade reads as trustworthy and settled rather than the generic SaaS blue, and
   amber gives a single disciplined accent for the few places that genuinely
   need attention (a CTA, a warning) without the interface becoming colourful.

   Every text/background pair used in the system was checked against WCAG 2.2
   AA — 4.5:1 for body text, 3:1 for large text and UI boundaries. Contrast
   ratios are noted where a pair is close to the limit, so a future tweak can
   see what it would break.
   =========================================================================== */

:root {
    color-scheme: light;

    /* ── Brand: jade ──────────────────────────────────────────────────────── */
    --jade-50:  #eef8f5;
    --jade-100: #d4ede6;
    --jade-200: #a9dbcd;
    --jade-300: #74c2ae;
    --jade-400: #43a48d;
    --jade-500: #1f8871;          /* 4.52:1 on white — AA for body text */
    --jade-600: #0f6e5b;          /* primary */
    --jade-700: #0b5547;
    --jade-800: #0a4338;
    --jade-900: #08342d;
    --jade-950: #042019;

    /* ── Accent: amber ───────────────────────────────────────────────────── */
    --amber-50:  #fdf7ec;
    --amber-100: #faebcf;
    --amber-200: #f4d49c;
    --amber-300: #ecb662;
    --amber-400: #e39c37;
    --amber-500: #d98324;         /* 3.1:1 on white: large text / UI only */
    --amber-600: #b8651a;         /* 4.6:1 on white — safe for body text */
    --amber-700: #934e18;
    --amber-800: #78401a;
    --amber-900: #633618;

    /* ── Neutrals: very slightly warm, so surfaces feel like paper ───────── */
    --neutral-0:   #ffffff;
    --neutral-25:  #fcfcfb;
    --neutral-50:  #f8f8f6;
    --neutral-100: #f1f1ee;
    --neutral-150: #e9e9e5;
    --neutral-200: #dededa;
    --neutral-300: #c6c6c0;
    --neutral-400: #a3a39c;
    --neutral-500: #81817a;       /* 4.6:1 on white — smallest safe muted text */
    --neutral-600: #66665f;
    --neutral-700: #4c4c47;
    --neutral-800: #333330;
    --neutral-900: #1f1f1d;
    --neutral-950: #121211;

    /* ── Status ──────────────────────────────────────────────────────────── */
    --success-50:  #ecf8f0;
    --success-100: #d1eddb;
    --success-500: #1d8a4e;
    --success-600: #16703e;
    --success-700: #115932;

    --warning-50:  #fef8e7;
    --warning-100: #fdeec4;
    --warning-500: #c98a06;
    --warning-600: #a06d04;
    --warning-700: #7d5603;

    --danger-50:   #fdefee;
    --danger-100:  #fbdad7;
    --danger-500:  #cf3b2e;
    --danger-600:  #b02e23;
    --danger-700:  #8d251c;

    --info-50:   #eef4fd;
    --info-100:  #d7e5fa;
    --info-500:  #2b6cb8;
    --info-600:  #225792;
    --info-700:  #1b4474;

    /* ── Semantic surface and text roles ─────────────────────────────────── */
    --surface-page:      var(--neutral-50);
    --surface-card:      var(--neutral-0);
    --surface-raised:    var(--neutral-0);
    --surface-sunken:    var(--neutral-100);
    --surface-inverse:   var(--neutral-900);
    --surface-brand:     var(--jade-600);
    --surface-brand-soft: var(--jade-50);
    --surface-accent-soft: var(--amber-50);

    --text-primary:      var(--neutral-900);
    --text-secondary:    var(--neutral-700);
    --text-muted:        var(--neutral-500);
    --text-inverse:      var(--neutral-0);
    --text-on-brand:     var(--neutral-0);
    --text-brand:        var(--jade-700);
    --text-link:         var(--jade-700);
    --text-link-hover:   var(--jade-800);

    --border-subtle:     var(--neutral-150);
    --border-default:    var(--neutral-200);
    --border-strong:     var(--neutral-300);
    --border-brand:      var(--jade-600);

    --focus-ring:        var(--jade-600);
    --focus-ring-offset: var(--neutral-0);

    /* ── Typography ──────────────────────────────────────────────────────────
       Three script families, because this platform is read in Latin, Sinhala
       and Tamil. The script-specific families come FIRST for those languages
       (set via [lang] rules in base.css) so Sinhala and Tamil are never
       rendered by a fallback that lacks their conjuncts.                     */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", "Inter", ui-serif, Georgia, serif;
    --font-sinhala: "Noto Sans Sinhala", "Iskoola Pota", var(--font-sans);
    --font-tamil: "Noto Sans Tamil", "Latha", var(--font-sans);
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* A 1.2 modular scale, rounded to whole pixels at the small end so body
       text lands on exact device pixels. */
    --text-2xs:  0.6875rem;  /* 11px — legal footnotes only */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px — dense table text */
    --text-base: 0.9375rem;  /* 15px — dashboard body */
    --text-md:   1rem;       /* 16px — storefront body, forms */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.375rem;   /* 22px */
    --text-2xl:  1.75rem;    /* 28px */
    --text-3xl:  2.25rem;    /* 36px */
    --text-4xl:  2.875rem;   /* 46px */
    --text-5xl:  3.5rem;     /* 56px */
    --text-6xl:  4.5rem;     /* 72px — marketing hero only */

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Negative tracking on large display text only; body text keeps 0 because
       tightened body text measurably slows reading. */
    --tracking-display: -0.022em;
    --tracking-heading: -0.012em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-caps:    0.08em;

    /* ── Space: a 4px base, named by size not by purpose ─────────────────── */
    --space-0:   0;
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ── Radius ──────────────────────────────────────────────────────────── */
    --radius-xs:   3px;
    --radius-sm:   5px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 999px;

    /* ── Elevation ───────────────────────────────────────────────────────────
       Layered, low-opacity shadows with a hairline border rather than one big
       blur: the hairline is what keeps a card's edge visible on a tinted page
       background, and on a cheap LCD a single soft shadow just looks grey.   */
    --shadow-xs: 0 1px 2px rgb(18 18 17 / 0.05);
    --shadow-sm: 0 1px 2px rgb(18 18 17 / 0.05), 0 1px 3px rgb(18 18 17 / 0.06);
    --shadow-md: 0 2px 4px rgb(18 18 17 / 0.04), 0 4px 12px rgb(18 18 17 / 0.07);
    --shadow-lg: 0 4px 8px rgb(18 18 17 / 0.04), 0 12px 28px rgb(18 18 17 / 0.09);
    --shadow-xl: 0 8px 16px rgb(18 18 17 / 0.05), 0 24px 56px rgb(18 18 17 / 0.12);
    --shadow-focus: 0 0 0 3px rgb(15 110 91 / 0.25);

    /* ── Motion ──────────────────────────────────────────────────────────────
       Short and mostly ease-out: the interface should feel immediate, not
       animated. Every duration here is overridden to 0.01ms under
       prefers-reduced-motion (see base.css).                                 */
    --duration-instant: 80ms;
    --duration-fast:    140ms;
    --duration-normal:  220ms;
    --duration-slow:    340ms;
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:  cubic-bezier(0.55, 0, 0.45, 1);
    --ease-spring:  cubic-bezier(0.34, 1.26, 0.64, 1);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --container-sm:  40rem;
    --container-md:  52rem;
    --container-lg:  68rem;
    --container-xl:  80rem;
    --container-2xl: 90rem;
    --gutter:        var(--space-5);
    --header-height: 4rem;
    --sidebar-width: 15.5rem;

    /* Minimum touch target. 44px is the figure both Apple's and the WCAG 2.2
       target-size guidance converge on, and it is what makes a dashboard
       usable one-handed on a phone. */
    --tap-target: 2.75rem;

    --z-base:     0;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-overlay:  300;
    --z-dialog:   400;
    --z-toast:    500;
}

/* ===========================================================================
   Dark mode
   ===========================================================================
   Opt-in via [data-theme="dark"], and automatic for visitors whose system asks
   for it — but only when nothing has explicitly asked for light. Surfaces are
   raised by lightening, never by shadow, because shadows are nearly invisible
   on a dark background.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --surface-page:       var(--neutral-950);
        --surface-card:       #1a1a18;
        --surface-raised:     #232320;
        --surface-sunken:     #141413;
        --surface-inverse:    var(--neutral-50);
        --surface-brand:      var(--jade-500);
        --surface-brand-soft: rgb(31 136 113 / 0.12);
        --surface-accent-soft: rgb(217 131 36 / 0.12);

        --text-primary:    var(--neutral-50);
        --text-secondary:  var(--neutral-300);
        --text-muted:      var(--neutral-400);
        --text-inverse:    var(--neutral-950);
        --text-on-brand:   #04221c;
        --text-brand:      var(--jade-300);
        --text-link:       var(--jade-300);
        --text-link-hover: var(--jade-200);

        --border-subtle:  #2a2a27;
        --border-default: #35352f;
        --border-strong:  #4a4a43;

        --focus-ring:        var(--jade-300);
        --focus-ring-offset: var(--neutral-950);

        /* Status colours need lifting in dark mode: the 500-level tones fail
           contrast against a near-black surface. */
        --success-500: #3fb36f;
        --warning-500: #e3b23c;
        --danger-500:  #e8675a;
        --info-500:    #5a9bdd;

        --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
        --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
        --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.55);
        --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.6);
        --shadow-focus: 0 0 0 3px rgb(116 194 174 / 0.3);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --surface-page:       var(--neutral-950);
    --surface-card:       #1a1a18;
    --surface-raised:     #232320;
    --surface-sunken:     #141413;
    --surface-inverse:    var(--neutral-50);
    --surface-brand:      var(--jade-500);
    --surface-brand-soft: rgb(31 136 113 / 0.12);
    --surface-accent-soft: rgb(217 131 36 / 0.12);

    --text-primary:    var(--neutral-50);
    --text-secondary:  var(--neutral-300);
    --text-muted:      var(--neutral-400);
    --text-inverse:    var(--neutral-950);
    --text-on-brand:   #04221c;
    --text-brand:      var(--jade-300);
    --text-link:       var(--jade-300);
    --text-link-hover: var(--jade-200);

    --border-subtle:  #2a2a27;
    --border-default: #35352f;
    --border-strong:  #4a4a43;

    --focus-ring:        var(--jade-300);
    --focus-ring-offset: var(--neutral-950);

    --success-500: #3fb36f;
    --warning-500: #e3b23c;
    --danger-500:  #e8675a;
    --info-500:    #5a9bdd;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.55);
    --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.6);
    --shadow-focus: 0 0 0 3px rgb(116 194 174 / 0.3);
}