/* ==========================================================================
   AWAD SPORTS — DESIGN TOKENS
   Light theme on :root, dark theme under [data-theme="dark"].
   Both themes are designed independently; every pairing used for text
   meets WCAG 2.2 AA (4.5:1 small text, 3:1 large text / UI).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- surfaces ---- */
  --bg:            #F6F6F3;   /* paper */
  --bg-raise:      #FFFFFF;   /* cards */
  --bg-sunken:     #ECECE7;   /* alt bands */
  --line:          #D8D8D0;
  --line-strong:   #B9B9AE;

  /* ---- ink ---- */
  --ink:           #101216;
  --ink-soft:      #3C4048;
  --ink-mute:      #5B6069;   /* 4.6:1 on --bg */

  /* ---- speed accent (signal red) ---- */
  --red:           #D31F2B;   /* fills, large graphics */
  --red-strong:    #B01822;   /* small text on light: 6.6:1 */
  --red-soft:      #F6DCDD;
  --on-red:        #FFFFFF;   /* 5.2:1 on --red */

  /* ---- AWAD family thread (gold) ---- */
  --gold:          #C5A059;   /* decorative lines, large marks */
  --gold-text:     #7A5A22;   /* small text on light: 4.6:1 */
  --gold-soft:     #EFE4CC;

  /* ---- velocity field (canvas + ambient layers) ---- */
  --vf-blend:      multiply;
  --vf-streak-a:   rgba(211, 31, 43, 0.34);   /* red streaks   */
  --vf-streak-b:   rgba(158, 122, 52, 0.30);  /* gold streaks  */
  --vf-streak-c:   rgba(72, 78, 90, 0.22);    /* carbon streaks*/
  --vf-grid:       rgba(16, 18, 22, 0.05);
  --vf-halo:       rgba(211, 31, 43, 0.05);

  /* ---- interactive ---- */
  --focus-ring:    #B01822;
  --btn-ghost-bd:  #101216;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(16,18,22,.06), 0 4px 14px rgba(16,18,22,.07);
  --shadow-2: 0 2px 6px rgba(16,18,22,.08), 0 14px 34px rgba(16,18,22,.12);

  /* ---- typography ---- */
  --font-display: "Archivo", "Tajawal", system-ui, sans-serif;
  --font-body:    "Archivo", "Tajawal", system-ui, sans-serif;
  --font-ar:      "Tajawal", "Archivo", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --fs-hero:  clamp(2.6rem, 1.2rem + 6.4vw, 6.2rem);
  --fs-h1:    clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  --fs-h2:    clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  --fs-lead:  clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-tag:   .75rem;

  /* ---- spacing / radii ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --rad-s: 6px; --rad-m: 12px; --rad-l: 20px; --rad-pill: 999px;

  --wrap: 74rem;
  --wrap-tight: 52rem;

  /* ---- motion ---- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.7, 0, .2, 1);
  --dur-fast:  160ms;
  --dur-base:  320ms;
  --dur-slow:  650ms;

  --header-h: 4.25rem;
}

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

  --bg:            #0C0E12;   /* carbon */
  --bg-raise:      #14171D;
  --bg-sunken:     #08090C;
  --line:          #262A33;
  --line-strong:   #3A3F4B;

  --ink:           #F2F3F5;
  --ink-soft:      #C3C7CE;
  --ink-mute:      #969CA7;   /* 6.9:1 on --bg */

  --red:           #F0343F;
  --red-strong:    #FF4D55;   /* small text on dark: 5.9:1 */
  --red-soft:      #3A151A;
  --on-red:        #16070A;   /* 6.1:1 on --red */

  --gold:          #C5A059;
  --gold-text:     #D9B36E;   /* small text on dark: 9.7:1 */
  --gold-soft:     #2A2317;

  --vf-blend:      screen;
  --vf-streak-a:   rgba(240, 52, 63, 0.30);
  --vf-streak-b:   rgba(217, 179, 110, 0.24);
  --vf-streak-c:   rgba(120, 132, 155, 0.16);
  --vf-grid:       rgba(242, 243, 245, 0.045);
  --vf-halo:       rgba(240, 52, 63, 0.07);

  --focus-ring:    #FF4D55;
  --btn-ghost-bd:  #F2F3F5;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45);
  --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 16px 38px rgba(0,0,0,.55);
}