/* ==========================================================================
   feature: UI-01, UI-03

   Design tokens. Nothing else in the codebase hardcodes a colour, a radius
   or a shadow. Changing the look means changing this file.

   The system is flat and neutral: white and near-white surfaces separated
   by hairline borders, one ink colour, and one accent kept for the things a
   shopper can act on. It replaced a glassmorphism theme whose translucent
   panels, pastel backdrop and floating cards gave every block the same
   weight, so nothing on a page read as more important than anything else.
   See plan/adr/0009-flat-neutral-design.md.

   Light is the default. Dark is applied by preference or by explicit
   override, and both are declared from one list so they cannot drift.

   Several names below (--glass-*, --solid-*, --scrim) are kept from the
   previous theme because a hundred templates reference them inline. They
   now resolve to flat values; new code uses the semantic names.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------- palette --- */
  /* --c-accent is the interface colour: links, focus rings, selected
     states. --c-accent-strong is the fill behind white text, so buttons
     and count badges clear 4.5:1. */
  --c-accent:        #4f46e5;
  --c-accent-strong: #4338ca;
  --c-accent-hover:  #3730a3;
  --c-accent-soft:   #6366f1;
  --c-accent-tint:   #eef2ff;
  --c-success:       #15803d;
  --c-success-tint:  #dcfce7;
  --c-warning:       #b45309;
  --c-warning-tint:  #fef3c7;
  --c-danger:        #b91c1c;
  --c-danger-tint:   #fee2e2;
  --c-info:          #0369a1;
  --c-info-tint:     #e0f2fe;
  --c-star:          #f59e0b;

  /* A second brand colour, pink, for deals and sale prices. */
  --c-accent-2:      #be185d;
  --c-accent-2-tint: #fce7f3;

  /* Decorative hues: category tiles, dashboard tiles. Each ink passes
     4.5:1 on its own tint, checked by the design test. */
  --hue-1: #6d28d9;  --hue-1-tint: #ede9fe;
  --hue-2: #be185d;  --hue-2-tint: #fce7f3;
  --hue-3: #b45309;  --hue-3-tint: #fef3c7;
  --hue-4: #047857;  --hue-4-tint: #d1fae5;
  --hue-5: #0369a1;  --hue-5-tint: #e0f2fe;
  --hue-6: #c2410c;  --hue-6-tint: #ffedd5;

  /* Gradients. Primary fills stay indigo to violet so white text clears
     4.5:1 at both ends; the brand gradient runs on to pink because it
     carries no body text. */
  --grad-primary:       linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  --grad-primary-hover: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
  --grad-brand:         linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  --grad-hero:
    radial-gradient(42rem 30rem at 0% 0%, #e0e7ff 0%, transparent 62%),
    radial-gradient(36rem 28rem at 100% 10%, #fce7f3 0%, transparent 60%),
    radial-gradient(40rem 26rem at 55% 130%, #fef3c7 0%, transparent 60%),
    #faf9ff;

  /* The footer: a deep indigo band that anchors the page. */
  --footer-bg:     #1e1b4b;
  --footer-text:   #e0e7ff;
  --footer-muted:  #a5b4fc;
  --footer-border: #312e81;

  /* ------------------------------------------------------- surfaces --- */
  --bg-base:       #ffffff;   /* the page */
  --bg-subtle:     #f7f7fc;   /* bands, panels, image wells */
  --bg-muted:      #eeedf7;   /* pressed, selected, skeletons */
  --surface:       #ffffff;   /* cards */
  --border:        #e4e4e8;
  --border-strong: #d1d1d7;

  /* ------------------------------------------------------------- ink --- */
  --text:            #18181b;
  --text-muted:      #52525b;
  --text-subtle:     #676770;
  --text-on-accent:  #ffffff;
  --text-inverse:    #ffffff;
  --link:            #4338ca;

  /* ---------------------------------------------------------- shadow --- */
  --shadow-sm: 0 1px 2px rgba(16, 16, 24, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 16, 24, 0.08);
  --shadow-lg: 0 12px 40px rgba(16, 16, 24, 0.14);
  --ring:      0 0 0 3px rgba(79, 70, 229, 0.22);
  --shadow-primary: 0 1px 2px rgba(67, 56, 202, 0.25), 0 4px 12px -4px rgba(109, 40, 217, 0.45);

  /* ------------------------------------------- kept for old templates --- */
  --bg-accent-1: #ffffff;
  --bg-accent-2: #ffffff;
  --bg-accent-3: #ffffff;
  --glass-bg:          var(--bg-subtle);
  --glass-bg-hover:    var(--bg-muted);
  --glass-bg-strong:   #ffffff;
  --glass-border:      var(--border);
  --glass-border-soft: var(--border);
  --glass-blur:        12px;
  --glass-blur-heavy:  16px;
  --glass-shadow:      var(--shadow-sm);
  --glass-shadow-lg:   var(--shadow-lg);
  --solid-bg:          var(--surface);
  --solid-bg-hover:    var(--bg-subtle);
  --solid-border:      var(--border);
  --scrim:             var(--bg-subtle);
  --console-bg:        #f7f7fc;
  --header-bg:         rgba(255, 255, 255, 0.86);

  /* ------------------------------------------------------------ shape --- */
  --r-sm:    6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ space --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.625rem;
  --s-4: 0.875rem;
  --s-5: 1.125rem;
  --s-6: 1.5rem;
  --s-7: 2.25rem;
  --s-8: 3rem;

  /* Control heights: one for fields and buttons, one large, one small. */
  --control-h:    34px;
  --control-h-lg: 42px;
  --control-h-sm: 28px;

  /* ------------------------------------------------------------- type --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  /* A compact scale: 14px body, tighter headings. A marketplace page is
     mostly scanning, and a denser page shows more of what is for sale. */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.875rem;
  --fs-lg:   1rem;
  --fs-xl:   1.125rem;
  --fs-2xl:  1.375rem;
  --fs-3xl:  1.75rem;
  --fs-4xl:  2.375rem;
  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ----------------------------------------------------------- layout --- */
  --container: 1320px;
  --header-h:  54px;

  /* ----------------------------------------------------------- motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------ depth --- */
  /* Exactly three elevations plus toasts. Nothing invents a fifth. */
  --z-raised:   1;
  --z-floating: 10;
  --z-overlay:  100;
  --z-toast:    1000;
}

/* ==========================================================================
   Dark theme. The same list twice, once for the system preference and once
   for an explicit choice, so the two can never drift apart. The design test
   reads the explicit block and checks every text pair in it.
   ========================================================================== */

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

    --c-accent:        #818cf8;
    --c-accent-strong: #4f46e5;
    --c-accent-hover:  #4338ca;
    --c-accent-soft:   #a5b4fc;
    --c-accent-tint:   #1e1b4b;
    --c-success:       #4ade80;
    --c-success-tint:  #052e16;
    --c-warning:       #fbbf24;
    --c-warning-tint:  #3a2505;
    --c-danger:        #f87171;
    --c-danger-tint:   #3b0d0d;
    --c-info:          #38bdf8;
    --c-info-tint:     #082f49;

    --c-accent-2:      #f472b6;
    --c-accent-2-tint: #500724;

    --hue-1: #c4b5fd;  --hue-1-tint: #2e1065;
    --hue-2: #f9a8d4;  --hue-2-tint: #500724;
    --hue-3: #fcd34d;  --hue-3-tint: #3a2505;
    --hue-4: #6ee7b7;  --hue-4-tint: #022c22;
    --hue-5: #7dd3fc;  --hue-5-tint: #082f49;
    --hue-6: #fdba74;  --hue-6-tint: #431407;

    --grad-hero:
      radial-gradient(42rem 30rem at 0% 0%, #1e1b4b 0%, transparent 62%),
      radial-gradient(36rem 28rem at 100% 10%, #3b0a2a 0%, transparent 60%),
      radial-gradient(40rem 26rem at 55% 130%, #2a1a05 0%, transparent 60%),
      #111016;

    --footer-bg:     #100e2b;
    --footer-text:   #e0e7ff;
    --footer-muted:  #a5b4fc;
    --footer-border: #26235a;

    --bg-base:       #0c0c0f;
    --bg-subtle:     #141418;
    --bg-muted:      #1c1c22;
    --surface:       #141418;
    --border:        #26262d;
    --border-strong: #34343d;

    --text:           #f4f4f5;
    --text-muted:     #b4b4bd;
    --text-subtle:    #8f8f9a;
    --text-inverse:   #0c0c0f;
    --link:           #a5b4fc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --ring:      0 0 0 3px rgba(129, 140, 248, 0.35);

    --glass-bg-strong: #141418;
    --console-bg:      #0c0c0f;
    --header-bg:       rgba(12, 12, 15, 0.86);
  }
}

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

  --c-accent:        #818cf8;
  --c-accent-strong: #4f46e5;
  --c-accent-hover:  #4338ca;
  --c-accent-soft:   #a5b4fc;
  --c-accent-tint:   #1e1b4b;
  --c-success:       #4ade80;
  --c-success-tint:  #052e16;
  --c-warning:       #fbbf24;
  --c-warning-tint:  #3a2505;
  --c-danger:        #f87171;
  --c-danger-tint:   #3b0d0d;
  --c-info:          #38bdf8;
  --c-info-tint:     #082f49;

  --c-accent-2:      #f472b6;
  --c-accent-2-tint: #500724;

  --hue-1: #c4b5fd;  --hue-1-tint: #2e1065;
  --hue-2: #f9a8d4;  --hue-2-tint: #500724;
  --hue-3: #fcd34d;  --hue-3-tint: #3a2505;
  --hue-4: #6ee7b7;  --hue-4-tint: #022c22;
  --hue-5: #7dd3fc;  --hue-5-tint: #082f49;
  --hue-6: #fdba74;  --hue-6-tint: #431407;

  --grad-hero:
    radial-gradient(42rem 30rem at 0% 0%, #1e1b4b 0%, transparent 62%),
    radial-gradient(36rem 28rem at 100% 10%, #3b0a2a 0%, transparent 60%),
    radial-gradient(40rem 26rem at 55% 130%, #2a1a05 0%, transparent 60%),
    #111016;

  --footer-bg:     #100e2b;
  --footer-text:   #e0e7ff;
  --footer-muted:  #a5b4fc;
  --footer-border: #26235a;

  --bg-base:       #0c0c0f;
  --bg-subtle:     #141418;
  --bg-muted:      #1c1c22;
  --surface:       #141418;
  --border:        #26262d;
  --border-strong: #34343d;

  --text:           #f4f4f5;
  --text-muted:     #b4b4bd;
  --text-subtle:    #8f8f9a;
  --text-inverse:   #0c0c0f;
  --link:           #a5b4fc;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --ring:      0 0 0 3px rgba(129, 140, 248, 0.35);

  --glass-bg-strong: #141418;
  --console-bg:      #0c0c0f;
  --header-bg:       rgba(12, 12, 15, 0.86);
}