/*
 * Shared Design Tokens
 * ────────────────────────────────────────────────
 * Import into any prototype:
 *   <link rel="stylesheet" href="../../shared/styles/tokens.css">
 *
 * PRIMARY tokens come from the WDS 2.0 design system
 * (foundation.json + semanticColor/{dark,light}.json).
 *
 * CONVENIENCE ALIASES map simple shorthand names to WDS tokens.
 * Use either — the aliases resolve to WDS values.
 *
 * Dark mode: add [data-mode="dark"], [data-theme="dark"], or class "dark"
 * to a parent element and all tokens flip automatically.
 */

/* ── Reset ──────────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════════
   WDS 2.0 TOKENS — PRIMARY
   Generated from foundation/foundation.json + semanticColor/{dark,light}.json
   Official CSS var names match com.figma.codeSyntax.Web from the Figma token export.
   DEFAULT IS LIGHT MODE.
═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
     FOUNDATION — COLOR PRIMITIVES
     Source: foundation/foundation.json → color.*
     Fixed base values — never overridden by theme.
  ───────────────────────────────────────────────────────────────────────── */

  /* Neutrals — opaque scale */
  --color-neutrals-opaque-0:    #ffffff;
  --color-neutrals-opaque-25:   #f3f3f3;
  --color-neutrals-opaque-50:   #e3e3e3;
  --color-neutrals-opaque-100:  #d2d2d2;
  --color-neutrals-opaque-200:  #bfbfbf;
  --color-neutrals-opaque-300:  #aaaaaa;
  --color-neutrals-opaque-400:  #959595;
  --color-neutrals-opaque-500:  #7f7f7f;
  --color-neutrals-opaque-600:  #6a6a6a;
  --color-neutrals-opaque-700:  #545454;
  --color-neutrals-opaque-750:  #404040;
  --color-neutrals-opaque-800:  #282527;
  --color-neutrals-opaque-900:  #121212;
  --color-neutrals-opaque-950:  #121212;
  --color-neutrals-opaque-1000: #000000;

  /* Neutrals — transparent white */
  --color-neutrals-transparent-white-0:   #ffffff00;
  --color-neutrals-transparent-white-5:   #ffffff0d;
  --color-neutrals-transparent-white-10:  #ffffff1a;
  --color-neutrals-transparent-white-20:  #ffffff33;
  --color-neutrals-transparent-white-40:  #ffffff66;
  --color-neutrals-transparent-white-70:  #ffffffb3;

  /* Neutrals — transparent black */
  --color-neutrals-transparent-black-0:   #00000000;
  --color-neutrals-transparent-black-5:   #0000000d;
  --color-neutrals-transparent-black-10:  #0000001a;
  --color-neutrals-transparent-black-20:  #00000033;
  --color-neutrals-transparent-black-40:  #00000066;
  --color-neutrals-transparent-black-70:  #000000b3;

  /* Primary — yellow */
  --color-primary-yellow-opaque-darkest:   #a59200;
  --color-primary-yellow-opaque-default:   #ffe414;
  --color-primary-yellow-opaque-lightest:  #fff7b9;
  --color-primary-yellow-transparent-5:    #ffe4140d;
  --color-primary-yellow-transparent-10:   #ffe4141a;
  --color-primary-yellow-transparent-20:   #ffe41433;
  --color-primary-yellow-transparent-40:   #ffe41466;
  --color-primary-yellow-transparent-70:   #ffe414b3;

  /* System — blue */
  --color-system-blue-opaque-darkest:  #003687;
  --color-system-blue-opaque-default:  #005ae1;
  --color-system-blue-opaque-lightest: #669ced;
  --color-system-blue-transparent-5:   #005ae10d;
  --color-system-blue-transparent-10:  #005ae11a;
  --color-system-blue-transparent-20:  #005ae133;
  --color-system-blue-transparent-70:  #005ae1b3;

  /* System — green */
  --color-system-green-opaque-darkest:  #00753c;
  --color-system-green-opaque-default:  #009e52;
  --color-system-green-opaque-lightest: #50c58c;
  --color-system-green-transparent-5:   #009e520d;
  --color-system-green-transparent-10:  #009e521a;
  --color-system-green-transparent-20:  #009e5233;
  --color-system-green-transparent-40:  #009e5266;
  --color-system-green-transparent-70:  #009e52b3;

  /* System — dark red */
  --color-system-dark-red-opaque-darkest:  #861b11;
  --color-system-dark-red-opaque-default:  #ce291a;
  --color-system-dark-red-opaque-lightest: #de665b;
  --color-system-dark-red-transparent-5:   #ce291a0d;
  --color-system-dark-red-transparent-10:  #ce291a1a;
  --color-system-dark-red-transparent-20:  #ce291a33;
  --color-system-dark-red-transparent-40:  #ce291a66;
  --color-system-dark-red-transparent-70:  #ce291ab3;

  /* System — orange */
  --color-system-orange-opaque-darkest:  #bf4e0d;
  --color-system-orange-opaque-default:  #ef6a1f;
  --color-system-orange-opaque-lightest: #f59d6b;
  --color-system-orange-transparent-10:  #ef6a1f1a;
  --color-system-orange-transparent-20:  #ef6a1f33;
  --color-system-orange-transparent-40:  #ef6a1f66;
  --color-system-orange-transparent-70:  #ef6a1fb3;

  /* Tertiary — red (live/brand red) */
  --color-tertiary-red-opaque-default:   #ef233c;
  --color-tertiary-red-transparent-5:    #ef233c0d;
  --color-tertiary-red-transparent-10:   #ef233c1a;
  --color-tertiary-red-transparent-20:   #ef233c33;
  --color-tertiary-red-transparent-40:   #ef233c66;
  --color-tertiary-red-transparent-70:   #ef233cb3;

  /* Legacy alias */
  --color-base-900: #121212;


  /* ─────────────────────────────────────────────────────────────────────────
     SEMANTIC — BACKGROUND (light mode defaults)
     Source: semanticColor/light.json → background.*
  ───────────────────────────────────────────────────────────────────────── */

  --background-canvas-default:                  var(--color-neutrals-opaque-0);
  --background-canvas-subtle:                   var(--color-neutrals-opaque-25);
  --background-canvas-inset:                    var(--color-neutrals-opaque-50);
  --background-canvas-inverse:                  var(--color-neutrals-opaque-900);

  --background-container-opaque-extraSubtle:    var(--color-neutrals-opaque-25);
  --background-container-opaque-subtle:         var(--color-neutrals-opaque-25);
  --background-container-opaque-subtleInverse:  var(--color-neutrals-opaque-800);
  --background-container-opaque-strong:         var(--color-neutrals-transparent-black-10);
  --background-container-opaque-strongInverse:  var(--color-neutrals-transparent-white-10);
  --background-container-opaque-brand:          var(--color-primary-yellow-opaque-default);
  --background-container-opaque-live:           var(--color-tertiary-red-opaque-default);
  --background-container-opaque-positive:       var(--color-system-green-opaque-default);
  --background-container-opaque-negative:       var(--color-system-dark-red-opaque-default);
  --background-container-opaque-warning:      var(--color-system-orange-opaque-default);
  --background-container-transparent-extraSubtle: var(--color-neutrals-transparent-black-5);
  --background-container-transparent-subtle:    var(--color-neutrals-transparent-black-10);
  --background-container-transparent-strong:    var(--color-neutrals-transparent-black-20);
  --background-container-transparent-positive:  var(--color-system-green-transparent-10);
  --background-container-transparent-negative:  var(--color-system-dark-red-transparent-10);
  --background-container-transparent-warning:   var(--color-system-orange-transparent-10);


  /* ─────────────────────────────────────────────────────────────────────────
     SEMANTIC — CONTENT (light mode defaults)
     Source: semanticColor/light.json → content.*
  ───────────────────────────────────────────────────────────────────────── */

  --content-primary:          var(--color-neutrals-opaque-900);
  --content-secondary:        var(--color-neutrals-opaque-700);
  --content-tertiary:         var(--color-neutrals-opaque-500);
  --content-disabled:         var(--color-neutrals-transparent-black-40);
  --content-primaryInverse:   var(--color-neutrals-opaque-0);
  --content-secondaryInverse: var(--color-neutrals-opaque-100);
  --content-tertiaryInverse:  var(--color-neutrals-opaque-300);
  --content-disabledInverse:  var(--color-neutrals-transparent-white-40);
  --content-placeholder:      var(--color-neutrals-opaque-300);
  --content-brand:            var(--color-primary-yellow-opaque-default);
  --content-link:             var(--color-system-blue-opaque-default);
  --content-linkInverse:      var(--color-system-blue-opaque-lightest);
  --content-negative:         var(--color-system-dark-red-opaque-default);
  --content-negativeInverse:  var(--color-system-dark-red-opaque-lightest);
  --content-positive:         var(--color-system-green-opaque-default);
  --content-positiveInverse:  var(--color-system-green-opaque-lightest);
  --content-warning:          var(--color-system-orange-opaque-default);
  --content-warningInverse:   var(--color-system-orange-opaque-lightest);


  /* ─────────────────────────────────────────────────────────────────────────
     SEMANTIC — BORDER / STROKE (light mode defaults)
     Source: semanticColor/light.json → border.*
  ───────────────────────────────────────────────────────────────────────── */

  --stroke-container-extraSubtle:     var(--color-neutrals-opaque-50);
  --stroke-container-subtle:          var(--color-neutrals-opaque-100);
  --stroke-container-default:         var(--color-neutrals-opaque-200);
  --stroke-container-defaultInverse:  var(--color-neutrals-opaque-500);
  --stroke-container-strong:          var(--color-neutrals-opaque-900);
  --stroke-container-strongInverse:   var(--color-neutrals-opaque-0);
  --stroke-container-positive:        var(--color-system-green-opaque-lightest);
  --stroke-container-positiveSubtle:  var(--color-system-green-transparent-10);
  --stroke-container-negative:        var(--color-system-dark-red-opaque-default);
  --stroke-container-negativeSubtle:  var(--color-system-dark-red-transparent-10);
  --stroke-container-warningStrong:   var(--color-system-orange-opaque-default);
  --stroke-container-warningSubtle:   var(--color-system-orange-transparent-10);


  /* ─────────────────────────────────────────────────────────────────────────
     FOUNDATION — TYPOGRAPHY
  ───────────────────────────────────────────────────────────────────────── */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --font-family-mono: 'SF Mono', 'Fira Mono', monospace;

  /* Font sizes */
  --font-size-display1: 32px;
  --font-size-display2: 24px;
  --font-size-title1:   18px;
  --font-size-title2:   16px;
  --font-size-body1:    14px;
  --font-size-body2:    13px;
  --font-size-caption:  12px;
  --font-size-callout:  11px;

  /* Line heights (matched to font sizes) */
  --line-height-display1: 36px;
  --line-height-display2: 32px;
  --line-height-title1:   24px;
  --line-height-title2:   20px;
  --line-height-body1:    20px;
  --line-height-body2:    18px;
  --line-height-caption:  16px;
  --line-height-callout:  14px;

  /* Font weights */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;  /* SF Pro semibold — shared by iOS and web components. 600 (rather than the canonical SF Pro 590) avoids a font-stack rounding edge case where 590 falls back to 500-weight glyphs in some renderers. */

  /* ─────────────────────────────────────────────────────────────────────────
     GRADIENTS
     Brand gradients used in specific components (challenge progress, etc.).
     Defined here so component code doesn't carry raw hex values.
  ───────────────────────────────────────────────────────────────────────── */

  --gradient-challenge: linear-gradient(to right, #f8dc00 0%, #f99500 100%);


  /* ─────────────────────────────────────────────────────────────────────────
     FOUNDATION — SPACING
  ───────────────────────────────────────────────────────────────────────── */

  --space-2:  2px;
  --space-4:  4px;
  --space-5:  20px;  /* legacy 4× multiplier name; aliased to 20px for components.css references */
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;


  /* ─────────────────────────────────────────────────────────────────────────
     FOUNDATION — RADIUS
  ───────────────────────────────────────────────────────────────────────── */

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-12:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;


  /* ═══════════════════════════════════════════════════════════════════════
     SUPPLEMENTARY TOKENS (not in WDS, but useful for prototyping)
  ═══════════════════════════════════════════════════════════════════════ */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-Index Scale */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* Phone Frame */
  --phone-width: 393px;
  --phone-height: 852px;
  --phone-frame-stroke: 8px;
  --phone-frame-radius: 44px;
  --phone-frame-color: #1a1a1a;
  --phone-notch-width: 126px;
  --phone-notch-height: 36px;
  --phone-status-bar-height: 54px;
  --phone-home-indicator-width: 134px;


  /* ═══════════════════════════════════════════════════════════════════════
     CONVENIENCE ALIASES
     Simple shorthand names that resolve to WDS tokens above.
     Use whichever naming style you prefer — these track the WDS values
     and flip automatically in dark mode.
  ═══════════════════════════════════════════════════════════════════════ */

  /* Colors — backgrounds */
  --color-bg:            var(--background-canvas-default);
  --color-bg-secondary:  var(--background-canvas-subtle);
  --color-bg-tertiary:   var(--color-neutrals-opaque-25);
  --color-surface:       var(--background-canvas-default);
  --color-surface-raised: var(--color-neutrals-opaque-0);

  /* Colors — text */
  --color-text:          var(--content-primary);
  --color-text-secondary: var(--content-secondary);
  --color-text-tertiary: var(--content-tertiary);
  --color-text-inverse:  var(--content-primaryInverse);

  /* Colors — borders */
  --color-border:        var(--stroke-container-subtle);
  --color-border-strong: var(--stroke-container-default);

  /* Colors — brand */
  --color-brand-yellow:  var(--color-primary-yellow-opaque-default);
  --color-brand-black:   var(--color-neutrals-opaque-900);
  --color-brand-white:   var(--color-neutrals-opaque-0);

  /* Colors — status */
  --color-success:        var(--color-system-green-opaque-default);
  --color-success-subtle: var(--background-container-transparent-positive);
  --color-error:          var(--color-system-dark-red-opaque-default);
  --color-error-subtle:   var(--background-container-transparent-negative);
  --color-warning:        var(--color-system-orange-opaque-default);
  --color-warning-subtle: var(--background-container-transparent-warning);
  --color-info:           var(--color-system-blue-opaque-default);
  --color-info-subtle:    var(--color-system-blue-transparent-10);

  /* Colors — interactive */
  --color-link:       var(--content-primary);
  --color-link-hover: var(--content-secondary);
  --color-focus-ring: var(--color-primary-yellow-transparent-40);

  /* Typography aliases */
  --font-sans:       var(--font-family-base);
  --font-mono:       var(--font-family-mono);

  --font-size-xs:    var(--font-size-callout);    /* 11px */
  --font-size-sm:    var(--font-size-caption);    /* 12px */
  --font-size-base:  var(--font-size-body1);      /* 14px */
  --font-size-md:    var(--font-size-title2);     /* 16px */
  --font-size-lg:    var(--font-size-title1);     /* 18px */
  --font-size-xl:    var(--font-size-display2);   /* 24px */
  --font-size-2xl:   var(--font-size-display1);   /* 32px */
  --font-size-3xl:   40px;

  --font-weight-normal: var(--font-weight-regular);
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Radius alias */
  --radius-pill: var(--radius-full);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WDS 2.0 DARK MODE OVERRIDES
   Source: semanticColor/dark.json
   Activated by [data-mode="dark"], [data-theme="dark"], or class "dark".
═══════════════════════════════════════════════════════════════════════════ */

:root [data-mode="dark"],
[data-mode="dark"],
[data-theme="dark"],
.dark {
  /* Background */
  --background-canvas-default:                  var(--color-neutrals-opaque-900);
  --background-canvas-subtle:                   var(--color-neutrals-opaque-900);
  --background-canvas-inset:                    var(--color-neutrals-opaque-750);
  --background-canvas-inverse:                  var(--color-neutrals-opaque-0);
  --background-container-opaque-extraSubtle:    var(--color-neutrals-opaque-800);
  --background-container-opaque-subtle:         var(--color-neutrals-opaque-800);
  --background-container-opaque-subtleInverse:  var(--color-neutrals-opaque-25);
  --background-container-opaque-strong:         var(--color-neutrals-transparent-black-10);
  --background-container-opaque-strongInverse:  var(--color-neutrals-transparent-white-10);
  --background-container-transparent-extraSubtle: var(--color-neutrals-transparent-white-5);
  --background-container-transparent-subtle:    var(--color-neutrals-transparent-white-10);
  --background-container-transparent-strong:    var(--color-neutrals-transparent-white-20);
  --background-container-transparent-positive:  var(--color-system-green-transparent-10);
  --background-container-transparent-negative:  var(--color-system-dark-red-transparent-10);
  --background-container-transparent-warning:   var(--color-system-orange-transparent-10);

  /* Content / Text */
  --content-primary:          var(--color-neutrals-opaque-0);
  --content-secondary:        var(--color-neutrals-opaque-100);
  --content-tertiary:         var(--color-neutrals-opaque-500);
  --content-disabled:         var(--color-neutrals-transparent-white-40);
  --content-primaryInverse:   var(--color-neutrals-opaque-900);
  --content-secondaryInverse: var(--color-neutrals-opaque-700);
  --content-tertiaryInverse:  var(--color-neutrals-opaque-300);
  --content-disabledInverse:  var(--color-neutrals-transparent-black-40);
  --content-link:             var(--color-system-blue-opaque-lightest);
  --content-linkInverse:      var(--color-system-blue-opaque-default);
  --content-negative:         var(--color-system-dark-red-opaque-lightest);
  --content-negativeInverse:  var(--color-system-dark-red-opaque-default);
  --content-positive:         var(--color-system-green-opaque-lightest);
  --content-positiveInverse:  var(--color-system-green-opaque-default);
  --content-warning:          var(--color-system-orange-opaque-lightest);
  --content-warningInverse:   var(--color-system-orange-opaque-default);

  /* Border / Stroke */
  --stroke-container-extraSubtle:     var(--color-neutrals-opaque-900);
  --stroke-container-subtle:          var(--color-neutrals-opaque-700);
  --stroke-container-default:         var(--color-neutrals-opaque-500);
  --stroke-container-defaultInverse:  var(--color-neutrals-opaque-200);
  --stroke-container-strong:          var(--color-neutrals-opaque-0);
  --stroke-container-strongInverse:   var(--color-neutrals-opaque-900);
  --stroke-container-positive:        var(--color-system-green-opaque-default);

  /* Supplementary dark overrides */
  --color-bg-tertiary:    var(--color-neutrals-opaque-800);
  --color-surface-raised: var(--color-neutrals-opaque-800);
  --color-link:           var(--content-primary);
  --color-link-hover:     var(--content-secondary);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}


/* ── Base Styles ────────────────────────────────── */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1);
  color: var(--content-primary);
  background: var(--background-canvas-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd {
  font-family: var(--font-family-mono);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}