/* Design Tokens — Arema FC Official Store
   Version 2.0 · 2026-08-05. Canonical token layer — tokens.json mirrors this file.
   Scope: public storefront (/store) only. NOT the main site, NOT the admin panel.

   v2.0 palette is sampled pixel-by-pixel from the approved reference screenshot
   (906×1998) using ImageMagick region histograms, not estimated by eye. Flat-fill
   areas are authoritative; values read from anti-aliased text are not used.
   Fixed light look with a dark footer band. No dark mode. */

:root {
  /* ── Tier 1: Primitives ─────────────────────────────────────── */

  /* Blue — nav, links, the first half of the two-tone heading device.
     Base #133196 sampled from the nav bar's flat fill. */
  --blue-900: #071852;
  --blue-800: #0d2470;
  --blue-700: #133196; /* brand base — do not alter without a brand decision */
  --blue-600: #1d43b8;
  --blue-500: #2a55d1; /* focus ring */
  --blue-300: #8fa6e2;
  --blue-100: #e2e8f8;
  --blue-50:  #f2f5fc;

  /* Red — SALE badge and the second half of the two-tone heading device.
     Base #CD0018 sampled from the SALE badge's flat fill. */
  --red-800: #8c0010;
  --red-700: #a80014;
  --red-600: #cd0018;
  --red-300: #ef98a3;
  --red-100: #fdeaec;

  /* Yellow — on-dark accent only. Sampled from the hero artwork's "STOCK".
     1.24:1 on white: NEVER place this on a light surface. */
  --yellow-500: #feea00;

  /* Neutrals — page #F6F6F5, card #F8F8F7, pill #1A1A1A, footer #0B0D17,
     and the copyright bar #05060B, all sampled from flat areas. */
  --neutral-0:    #ffffff;
  --neutral-50:   #f8f8f7;
  --neutral-100:  #f6f6f5;
  --neutral-200:  #e2e2e2;
  --neutral-300:  #a0a6b3; /* 2.44:1 on white — disabled UI only, never text */
  --neutral-400:  #9ea3ae; /* 7.67:1 on the dark footer — muted text on dark */
  --neutral-500:  #767c8a; /* 4.18:1 on white — interactive borders */
  --neutral-600:  #5f6675; /* 5.33:1 on #f6f6f5 — muted text on light */
  --neutral-900:  #1a1a1a; /* 17.4:1 on white — body text and pill buttons */
  --neutral-950:  #0b0d17; /* footer */
  --neutral-1000: #05060b; /* copyright bar */

  /* ── Tier 2: Semantic — surfaces ────────────────────────────── */
  --color-bg: var(--neutral-100);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-50);
  --color-surface-brand: var(--blue-700);   /* nav bar only */
  --color-surface-dark: var(--neutral-950);  /* footer */
  --color-surface-darker: var(--neutral-1000); /* copyright bar */

  /* ── Tier 2: Semantic — text ────────────────────────────────── */
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-disabled: var(--neutral-300);
  --color-text-on-brand: var(--neutral-0);
  --color-text-on-dark: var(--neutral-0);
  --color-text-on-dark-muted: var(--neutral-400);
  --color-text-on-accent: var(--neutral-0);

  /* ── Tier 2: Semantic — the two-tone heading device ─────────── */
  /* Signature element. Light surfaces use blue + red; dark surfaces MUST use
     the on-dark pair, because --heading-tone-a on --color-surface-dark is
     1.76:1 — a hard accessibility failure. See design.md §7.1. */
  --heading-tone-a: var(--blue-700);
  --heading-tone-b: var(--red-600);
  --heading-tone-a-on-dark: var(--yellow-500);
  --heading-tone-b-on-dark: var(--neutral-0);

  /* ── Tier 2: Semantic — actions ─────────────────────────────── */
  /* Primary actions are BLACK pills in v2.0. Blue is structural (nav, links),
     never a button fill. */
  --color-action: var(--neutral-900);
  --color-action-hover: #000000;
  --color-on-action: var(--neutral-0);

  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-800);

  --color-accent: var(--red-600); /* reserved: sale price, SALE badge, ribbon */
  --color-accent-hover: var(--red-700);
  --color-on-accent: var(--neutral-0);

  --color-border: var(--neutral-200);
  --color-border-interactive: var(--neutral-500);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  --color-focus: var(--blue-500);
  --color-focus-ring: rgba(42, 85, 209, 0.4);
  --color-focus-on-dark: var(--yellow-500);

  --color-sold-out-veil: rgba(255, 255, 255, 0.6);
  --color-watermark: rgba(19, 49, 150, 0.04); /* section texture, decorative only */

  /* ── Tier 2: Semantic — typography ──────────────────────────── */
  /* Schibsted Grotesk carried over from v1.0. v2.0 adds NO font family. */
  --font-display: "Schibsted Grotesk", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Schibsted Grotesk", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.25rem;  /* 20px */
  --text-xl:   1.5rem;   /* 24px */
  --text-2xl:  1.75rem;  /* 28px */
  --text-3xl:  2.25rem;  /* 36px */
  --text-4xl:  3.5rem;   /* 56px */

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

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.18em;

  /* ── Tier 2: Semantic — spacing ─────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --section-gap-mobile:  var(--space-12);
  --section-gap-desktop: var(--space-20);

  /* ── Tier 2: Semantic — radii, borders, shadow ──────────────── */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   20px;
  --radius-xl:   40px;
  --radius-full: 999px; /* pill buttons */

  --border-width: 1px;
  --border-width-thick: 2px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

  /* ── Tier 2: Semantic — motion ─────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Tier 2: Semantic — layout ─────────────────────────────── */
  /* Breakpoints mirror Bootstrap 4.3.1 exactly. Do not introduce others. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  --container-max: 1200px;
  --touch-target-min: 44px;

  --z-sticky: 1020;
  --z-fixed:  1030;
  --z-modal:  1050;

  /* ── Tier 3: Component-scoped ───────────────────────────────── */
  --product-image-ratio: 100%;   /* 1:1 box for product imagery */
  --category-image-ratio: 75%;   /* 4:3 box for category photo cards */
  --header-height: 72px;
  --ticker-height: 32px;
  --nav-underline-width: var(--border-width-thick);
  --hero-ratio-mobile: 66%;      /* 3:2 on small screens */
  --hero-ratio-desktop: 31.5%;   /* wide banner on desktop */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}