/* ============================================================================
   AlmaUnião — design tokens (canonical)
   ----------------------------------------------------------------------------
   THE single source of truth for the visual language. Values extracted from the
   `almauniao-redesign.html` reference mock.

   Nothing else in the app may declare a raw colour, radius or shadow: pages and
   components consume these via var(--token).

   `theme.css` maps the older token names (--brand-primary, --surface-2,
   --text-primary, …) onto the ones below, so the ~8600 existing var() call
   sites keep working while inheriting this palette. That alias layer is a
   compatibility shim, not a second system — new code should use the names
   defined here.

   Load order (see App.razor): bootstrap → MudBlazor → tokens → components →
   theme → app. Later files win the cascade.
   ============================================================================ */

:root {
    /* --- Brand: calm amethyst/indigo ------------------------------------- */
    --brand-50: #f2f0fd;
    --brand-100: #e6e2fb;
    --brand-200: #ccc4f6;
    --brand-300: #a99ced;
    --brand-400: #8b78e6;
    --brand-500: #6d5dd3;
    --brand-600: #5a49bd;
    --brand-700: #4a3f9e;
    --brand-800: #3a3080;

    /* --- Support: sage green --------------------------------------------- */
    --sage-100: #e4f2ec;
    --sage-300: #9dd3bf;
    --sage-500: #4faa8b;
    --sage-700: #357a63;

    /* --- Accent: gold. Reserved for ratings, nothing else. ---------------- */
    --gold-400: #e9b949;
    --gold-500: #d9a323;

    /* --- Neutrals, tinted with indigo rather than pure grey --------------- */
    --ink-900: #1e1b3a;
    --ink-700: #3a3660;
    --ink-500: #6b6790;
    --ink-400: #8e8ab0;
    --ink-300: #b9b6d0;
    --line: #e7e5f2;

    /* --- Surfaces ---------------------------------------------------------
       The mock calls the third one `--surface-2`. Renamed to
       `--surface-subtle` here: this codebase already has a `--surface-2`
       meaning "white card" at 133 call sites, and reusing the name would
       silently turn every card off-white. */
    --bg: #f6f5fb;             /* app background */
    --surface: #ffffff;        /* cards, navbar, raised surfaces */
    --surface-subtle: #faf9ff; /* subtle panels, sidebars, track fills */

    /* --- States ----------------------------------------------------------- */
    --success: #2e9e6b;
    --success-bg: #e4f6ee;
    --warn: #c98a12;
    --warn-bg: #fdf1dc;
    --danger: #d1435b;
    --danger-bg: #fdeaee;

    /* --- Typography -------------------------------------------------------- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Radius ------------------------------------------------------------ */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* --- Elevation --------------------------------------------------------- */
    --sh-1: 0 1px 2px rgba(30, 27, 58, .06), 0 1px 3px rgba(30, 27, 58, .05);
    --sh-2: 0 4px 12px rgba(30, 27, 58, .08), 0 2px 4px rgba(30, 27, 58, .04);
    --sh-3: 0 12px 32px rgba(74, 63, 158, .14);

    /* --- Focus ------------------------------------------------------------- */
    --focus: 0 0 0 3px rgba(109, 93, 211, .35);

    /* --- App-specific, no equivalent in the mock ---------------------------
       Peach is used by the category card gradients; kept so the existing
       gradient tokens below still resolve. */
    --peach-bg: #faece7;
    --peach-text: #993c1d;
    --peach-mid: #f09977;

    /* --- Gradients ---------------------------------------------------------- */
    --hero-gradient: radial-gradient(120% 120% at 50% -10%, var(--brand-50), transparent 60%),
                     linear-gradient(180deg, #f3f1fc, #eef6f2);
    --card-gradient-purple: linear-gradient(135deg, var(--brand-300), var(--brand-500));
    --card-gradient-teal: linear-gradient(135deg, var(--sage-300), var(--sage-500));
    --card-gradient-peach: linear-gradient(135deg, var(--peach-bg), var(--peach-mid));
    --card-gradient-warm: linear-gradient(135deg, var(--warn-bg), var(--gold-400));
}

/* ============================================================================
   Dark scheme.

   Only the tokens whose ROLE changes between schemes are redefined here; the
   brand ramp stays put. Declared twice on purpose:
     - under prefers-color-scheme, guarded so an explicit light choice wins;
     - under [data-theme="dark"], so an explicit dark choice wins either way.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink-900: #ecebf6;
        --ink-700: #cbc8de;
        --ink-500: #aaa7c0;
        --ink-400: #77748f;
        --ink-300: #5b5874;
        --line: #34324a;

        --bg: #141320;
        --surface: #232236;
        --surface-subtle: #1c1b2a;

        --brand-50: #2b2551;
        --brand-100: #332c5e;
        --brand-800: #d7d3ff;

        --success-bg: #123a30;
        --success: #7fdcbc;
        --warn-bg: #3a2f18;
        --warn: #f0c67c;
        --danger-bg: #3a1f1f;
        --danger: #ef9a9a;

        --peach-bg: #3a241c;
        --peach-text: #f0a98c;

        --hero-gradient: linear-gradient(135deg, #221d3f 0%, #123a30 100%);
    }
}

:root[data-theme="dark"] {
    --ink-900: #ecebf6;
    --ink-700: #cbc8de;
    --ink-500: #aaa7c0;
    --ink-400: #77748f;
    --ink-300: #5b5874;
    --line: #34324a;

    --bg: #141320;
    --surface: #232236;
    --surface-subtle: #1c1b2a;

    --brand-50: #2b2551;
    --brand-100: #332c5e;
    --brand-800: #d7d3ff;

    --success-bg: #123a30;
    --success: #7fdcbc;
    --warn-bg: #3a2f18;
    --warn: #f0c67c;
    --danger-bg: #3a1f1f;
    --danger: #ef9a9a;

    --peach-bg: #3a241c;
    --peach-text: #f0a98c;

    --hero-gradient: linear-gradient(135deg, #221d3f 0%, #123a30 100%);
}