/* ==========================================================================
   NetballOS — Design Tokens
   Single source of truth for colour, type, space, radius, elevation, motion.
   Generated from brand/colours.md and brand/typography.md.
   Components reference semantic tokens only — never a raw hex. (ADR-011)
   ========================================================================== */

:root {
  /* ---- Brand palette (identity — surfaces, fills, large type) ------------ */
  --nos-navy:            #071A3D;
  --nos-pink:            #FF2D8D;
  --nos-purple:          #7027D9;
  --nos-violet:          #9B4DFF;
  --nos-deep-violet:     #4008C8;   /* logo-derived, gradient only */
  --nos-deep-blue:       #001880;   /* logo-derived, gradient only */
  --nos-soft-pink:       #FFD6EA;
  --nos-soft-lavender:   #E8DEFF;
  --nos-cloud:           #F6F8FC;
  --nos-white:           #FFFFFF;
  --nos-slate:           #475569;

  /* ---- Accessible derivations (text & small UI — all ≥4.5:1 on white) ---- */
  --nos-pink-strong:     #D6006B;   /* 5.2:1 */
  --nos-purple-strong:   #5B1CB0;   /* 9.6:1 */
  --nos-success:         #16A34A;
  --nos-success-text:    #15803D;   /* 5.0:1 */
  --nos-warning:         #F59E0B;
  --nos-warning-text:    #B45309;   /* 5.1:1 */
  --nos-danger:          #DC2626;   /* 4.8:1 */
  --nos-danger-strong:   #B91C1C;   /* 6.5:1 */

  /* ---- Navy ramp -------------------------------------------------------- */
  --nos-navy-50:   #F2F5FB;
  --nos-navy-100:  #E2E8F4;
  --nos-navy-200:  #C6D1E7;
  --nos-navy-300:  #9AACD1;
  --nos-navy-400:  #6C81B2;
  --nos-navy-500:  #4A5F91;
  --nos-navy-600:  #334774;
  --nos-navy-700:  #1F325B;
  --nos-navy-800:  #0D2551;
  --nos-navy-900:  #071A3D;
  --nos-navy-950:  #040E22;

  /* ---- Semantic: surfaces ----------------------------------------------- */
  --color-canvas:          var(--nos-cloud);
  --color-surface:         var(--nos-white);
  --color-surface-raised:  var(--nos-white);
  --color-surface-subtle:  var(--nos-navy-50);
  --color-surface-inverse: var(--nos-navy-900);

  /* ---- Semantic: text ---------------------------------------------------- */
  --color-text:            var(--nos-navy-900);
  --color-text-secondary:  var(--nos-slate);
  --color-text-tertiary:   var(--nos-navy-500);   /* 6.3:1 on white — navy-400 measured 3.9:1 */
  --color-text-inverse:    var(--nos-white);
  --color-text-accent:     var(--nos-pink-strong);
  --color-text-accent-dark:#FF5CA5;               /* accent on navy — 5.9:1 */
  --color-link:            var(--nos-purple-strong);

  /* ---- Semantic: borders ------------------------------------------------- */
  --color-border:          var(--nos-navy-100);
  --color-border-strong:   var(--nos-navy-200);
  --color-focus:           var(--nos-pink);

  /* ---- Semantic: actions ------------------------------------------------- */
  --color-action-bg:       var(--nos-pink-strong);
  --color-action-fg:       var(--nos-white);
  --color-action-hover:    #B80059;
  --color-action-ai:       var(--nos-purple);
  --color-tick:            var(--nos-success-text);  /* 5.0:1 on white */

  /* ---- Gradients --------------------------------------------------------- */
  --gradient-ui:    linear-gradient(100deg, #FF2D8D 0%, #7027D9 55%, #9B4DFF 100%);
  --gradient-brand: linear-gradient(100deg, #FF2088 0%, #8810E8 42%, #4008C8 74%, #001880 100%);

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --text-display-2xl: clamp(2.5rem,  1.55rem + 4.2vw, 4.5rem);
  --text-display-xl:  clamp(2.125rem,1.55rem + 2.6vw, 3.5rem);
  --text-display-lg:  clamp(1.875rem,1.50rem + 1.7vw, 2.75rem);
  --text-heading-xl:  clamp(1.625rem,1.42rem + 0.9vw, 2.125rem);
  --text-heading-lg:  clamp(1.375rem,1.26rem + 0.5vw, 1.6875rem);
  --text-heading-md:  clamp(1.1875rem,1.14rem + 0.2vw,1.375rem);
  --text-heading-sm:  1.0625rem;
  --text-body-lg:     clamp(1.0625rem,1.04rem + 0.1vw,1.125rem);
  --text-body:        1rem;
  --text-body-sm:     0.875rem;
  --text-caption:     0.8125rem;
  --text-overline:    0.75rem;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  /* ---- Space (4px base) --------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* ---- Radius ------------------------------------------------------------- */
  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-full: 9999px;

  /* ---- Elevation (border + low-spread shadow, never heavy) ---------------- */
  --shadow-sm: 0 1px 2px rgba(7, 26, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(7, 26, 61, 0.07);
  --shadow-lg: 0 12px 32px rgba(7, 26, 61, 0.10);

  /* ---- Motion (fast and functional) --------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-state: 150ms;
  --duration-enter: 200ms;

  /* ---- Layout ------------------------------------------------------------- */
  --container: 1180px;
  --measure: 68ch;
}

/* ==========================================================================
   Dark mode — token redefinition only. Elevation by lightening, not shadow.
   Pink and violet are lifted for legibility on navy.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas:          var(--nos-navy-950);
    --color-surface:         var(--nos-navy-900);
    --color-surface-raised:  var(--nos-navy-800);
    --color-surface-subtle:  #061530;
    --color-surface-inverse: var(--nos-white);

    --color-text:            #EEF2FA;
    --color-text-secondary:  var(--nos-navy-300);
    --color-text-tertiary:   var(--nos-navy-400);
    --color-text-inverse:    var(--nos-navy-900);
    --color-text-accent:     #FF5CA5;
    --color-link:            #C4A0FF;

    --color-border:          #14284F;
    --color-border-strong:   #1F325B;

    --color-action-bg:       #FF3D96;
    --color-action-fg:       #12030B;
    --color-action-hover:    #FF63AB;
  --color-tick:            #4ADE80;               /* 9.8:1 on navy-900 */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --color-canvas:          var(--nos-navy-950);
  --color-surface:         var(--nos-navy-900);
  --color-surface-raised:  var(--nos-navy-800);
  --color-surface-subtle:  #061530;
  --color-surface-inverse: var(--nos-white);

  --color-text:            #EEF2FA;
  --color-text-secondary:  var(--nos-navy-300);
  --color-text-tertiary:   var(--nos-navy-400);
  --color-text-inverse:    var(--nos-navy-900);
  --color-text-accent:     #FF5CA5;
  --color-link:            #C4A0FF;

  --color-border:          #14284F;
  --color-border-strong:   #1F325B;

  --color-action-bg:       #FF3D96;
  --color-action-fg:       #12030B;
  --color-action-hover:    #FF63AB;
  --color-tick:            #4ADE80;               /* 9.8:1 on navy-900 */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}