/* ==========================================================================
   tokens.css
   Single source of truth for the app's design tokens (CSS custom
   properties). Loaded first by both views/home.ejs (the authenticated
   shell) and views/login.ejs (the standalone auth page) so every
   stylesheet in the app — including login.css — draws from the same
   palette instead of each file inventing its own.

   Previously this :root block lived inside home.css, a page-specific
   file that happened to always load first — fragile, since nothing
   stopped a future edit to home.css from silently deleting the site's
   only token source. It's a dedicated file now for exactly that reason.
   ========================================================================== */
:root {
    /* --- Brand / primary accent: taken from the Eijac Traders wordmark
       (views/partials/brand-logo.ejs) — hemp, bark brown and seed gold.
       --color-primary is the everyday accent (links, active states, icons,
       focus rings); a darkened seed gold, since the logo's own #B08A55 is
       only 3.2:1 on white and fails as text. --color-primary-strong is
       reserved for hover/active states and the single solid-fill CTA per
       view. --color-primary-soft-* back the tinted "soft fill" button/badge
       variant that secondary actions should default to instead of a heavy
       solid fill. --color-on-primary is the text color on a solid
       --color-primary fill (white here, dark in dark mode, where the
       primary turns light). */
    --color-primary: #8A6A3B;
    --color-primary-strong: #6B5230;
    --color-primary-soft-bg: #F5EFE2;
    --color-primary-soft-text: #5A4327;
    --color-primary-border: #DCCFAE;
    --color-on-primary: #ffffff;

    /* Back-compat aliases for older call sites not yet migrated to the
       names above. */
    --color-primary-dark: var(--color-primary-strong);
    --color-primary-hover: var(--color-primary-strong);

    /* --- Logo colors (the wordmark itself, not UI accents) --- */
    --color-brand-ink: #3F2E22;
    --color-brand-seed: #B08A55;

    /* --- Surfaces: warm off-whites to sit with the earthy brand, rather
       than the cool slate greys that suited the old indigo palette --- */
    --color-surface: #ffffff;
    --color-surface-muted: #F8F6F1;
    --color-surface-hover: #F1EDE4;
    --color-background: var(--color-surface-muted);

    /* --- Borders --- */
    --color-border: #E6E0D4;
    --color-border-strong: #D2C9B8;
    --border-color: var(--color-border);

    /* --- Text --- */
    --color-text-primary: #2A211A;
    --color-text-secondary: #4A3F35;
    --color-text-muted: #6F6254;
    --color-text-main: var(--color-text-primary);

    /* --- Semantic status colors --- */
    --color-danger: #dc3545;
    --color-danger-strong: #c82333;
    --color-danger-bg: #fee2e2;
    --color-success: #16a34a;
    --color-success-strong: #15803d;
    --color-success-bg: #dcfce7;
    --color-warning: #f59e0b;
    --color-warning-strong: #b45309;   /* text on --color-warning-bg: #d97706 was 2.9:1 */
    --color-warning-bg: #fef3c7;

    /* --- Radius scale --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 9999px;
    --border-radius: var(--radius-md);

    /* --- Elevation / shadow scale --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Dark theme overrides (Pitch Black / Pure OLED Dark Mode). Lives on
   body[data-theme="dark"], not :root[data-theme="dark"] — the theme is
   only known from the logged-in user's saved preference, not before the
   page renders, and custom properties still inherit from <body> down to
   every descendant just like they would from :root.

   Every alias below (--color-primary-dark, --color-text-main, etc.) has
   to be redeclared here, not just pointed at its target once in :root:
   a custom property's value is computed once, at the element it's
   declared on. --color-text-main: var(--color-text-primary) in :root
   resolves using :root's own (light) --color-text-primary and then
   inherits that already-resolved value down — it never re-reads the
   overridden dark value below unless redeclared on this same selector.
   Forgetting this is what let --color-text-main stay frozen in its
   light-mode color under dark theme for a while; don't reintroduce that
   by adding a new alias only in :root.
   -------------------------------------------------------------------------- */
body[data-theme="dark"] {
    --color-primary: #CDBF93;
    --color-primary-strong: #E0D4AE;
    --color-primary-soft-bg: #2A241B;
    --color-primary-soft-text: #E4D8B4;
    --color-primary-border: #5A4A33;
    --color-on-primary: #1B1510;

    --color-primary-dark: var(--color-primary-strong);
    --color-primary-hover: var(--color-primary-strong);

    --color-brand-ink: #CDBF93;
    --color-brand-seed: #D2AE74;

    /* Pitch Black Surfaces */
    --color-surface-muted: #000000;      /* Pure black base canvas */
    --color-surface: #0d0d0d;            /* Elevated card/container surface */
    --color-surface-hover: #1a1a1a;      /* Hover states for interactive surfaces */
    --color-background: var(--color-surface-muted);

    /* High-Contrast Pitch Black Borders */
    --color-border: #262626;
    --color-border-strong: #404040;
    --border-color: var(--color-border);

    /* High-Legibility Neutral Text */
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #a3a3a3;
    --color-text-muted: #8f8f8f;         /* ≥4.5:1 on every dark surface above; #737373 was 4.1:1 on --color-surface */
    --color-text-main: var(--color-text-primary);

    /* Pitch Black Semantic Status Colors */
    --color-danger: #f87171;
    --color-danger-strong: #fca5a5;
    --color-danger-bg: #2c0b0e;
    --color-success: #4ade80;
    --color-success-strong: #86efac;
    --color-success-bg: #052e16;
    --color-warning: #fbbf24;
    --color-warning-strong: #fcd34d;
    --color-warning-bg: #2d1a00;

    /* Subtle rim-light style shadows for true black contrast */
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
}