/* Jockibox Design Language v2.2.0: the @layer order, every token (§1, §2, §4) and
   the reduced-motion rule (§5),
   copied verbatim from docs/design/jockibox-design-language.md. Do not edit here:
   change the design language upstream, then re-copy. App-specific values belong in
   design.css under @layer brand. */

@layer reset, tokens, base, components, patterns, brand, utilities;

@layer tokens {
:root {
  --brand-navy: #102A43;   /* ink, light-mode fills, dark-mode surfaces */
  --brand-teal: #37B3A6;   /* accent; the primary ramp derives from it */
  --brand-mist: #EEF3F6;   /* light page background, reversed logo ink  */

  --font-sans:    'Figtree', system-ui, sans-serif;
  --font-display: var(--font-sans);          /* page, section, modal and panel titles */

  --radius-control:   var(--radius-sm);      /* buttons, inputs, chips, checkboxes */
  --radius-container: var(--radius-lg);      /* cards, modals, menus, panels       */
  --radius-badge:     var(--radius-pill);

  --logo-height: 28px;
}
}

@layer tokens {
:root {
  /* ── COLOR ────────────────────────────────────────── */
  --white: #FFFFFF;

  --navy-50:  #F3F7FC;  --navy-100: #E9F1F9;  --navy-200: #D7E3F0;
  --navy-300: #C0D0E1;  --navy-400: #95ABC0;  --navy-500: #7189A3;
  --navy-600: #516A81;  --navy-700: #38526E;  --navy-800: #1B3A57;
  --navy-850: #16324E;  --navy-900: var(--brand-navy);  --navy-950: #0A1D30;

  --gray-50:  #F7F9FC;  --gray-100: var(--brand-mist);  --gray-200: #DEE4E8;
  --gray-300: #CCD2D6;  --gray-400: #A7ADB2;  --gray-500: #81878B;
  --gray-600: #676D71;  --gray-700: #4E5357;  --gray-800: #363B3F;
  --gray-900: #202528;

  /* Primary (teal). -500 is the brand; the DERIVED block at the end of this
     layer computes the rest from it. These literals are the fallback for
     browsers without relative color, and must be regenerated if
     --brand-teal changes (§13). */
  --color-primary-500: var(--brand-teal);
  --color-primary-100: #D7EDEA;
  --color-primary-300: #72BEB4;
  --color-primary-700: #007368;
  --color-primary-900: #004039;

  --success-100: #DEF9DA;  --success-300: #65CD5C;  --success-500: #2C7926;
  --warning-100: #FEEDD9;  --warning-300: #F5AE4B;  --warning-500: #8F5D04;
  --danger-100:  #FFE9E6;  --danger-300:  #F6857A;  --danger-500:  #BE2F2C;

  /* Chart hues, one per series slot, stepped for each theme (§10) */
  --viz-gold:    #C6960B;  --viz-gold-dark:    #B08403;
  --viz-violet:  #9973DF;  --viz-violet-dark:  #BC9CFF;
  --viz-green:   #297D0F;  --viz-green-dark:   #50A33D;
  --viz-magenta: #BC4B87;  --viz-magenta-dark: #FB83BF;
  --viz-coral:   #F2716A;  --viz-coral-dark:   #DC5E59;
  --viz-blue:    #2466C3;  --viz-blue-dark:    #498BEB;
  --viz-orange:  #A14F08;  --viz-orange-dark:  #FF9044;

  /* ── RADIUS ───────────────────────────────────────── */
  --radius-sm:     2px;
  --radius-lg:     5px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ── SPACING (4px base) ───────────────────────────── */
  --space-0: 0;     --space-px: 2px;  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 40px;  --space-8: 48px;  --space-9: 56px;  --space-10: 64px;

  /* ── TYPOGRAPHY ───────────────────────────────────── */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-2xs: 11px;  --font-size-xs: 12px;  --font-size-sm: 13px;
  --font-size-md:  14px;  --font-size-lg: 16px;  --font-size-xl: 18px;
  --font-size-2xl: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  --line-tight: 1.2;  --line-base: 1.45;  --line-loose: 1.6;
  --tracking-eyebrow: 1.4px;

  /* ── ICONS ────────────────────────────────────────── */
  --icon-size-sm:      12px;   /* decorative inline glyphs only, never clickable */
  --icon-size:         16px;   /* beside text, and inside labelled buttons       */
  --icon-size-action:  18px;   /* icon-only buttons                              */
  --icon-size-lg:      32px;   /* empty states                                   */
  --icon-stroke-width: 2;

  /* ── ELEVATION ────────────────────────────────────── */
  --shadow-md:           0 2px 4px -2px rgba(16,42,67,.06), 0 4px 8px -2px rgba(16,42,67,.10);
  --shadow-lg:           0 4px 6px -2px rgba(16,42,67,.05), 0 12px 16px -4px rgba(16,42,67,.10);
  --shadow-overlay:      0 8px 8px -4px rgba(16,42,67,.05), 0 20px 24px -4px rgba(16,42,67,.12);
  --shadow-md-dark:      0 2px 4px -2px rgba(0,0,0,.5), 0 4px 10px -2px rgba(0,0,0,.45);
  --shadow-lg-dark:      0 6px 16px -4px rgba(0,0,0,.55);
  --shadow-overlay-dark: 0 16px 32px -8px rgba(0,0,0,.65);

  /* ── MOTION ───────────────────────────────────────── */
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-spin:    600ms;
  --duration-shimmer: 1.4s;
  --ease-standard:    cubic-bezier(.4, 0, .2, 1);
  /* Anything that slides into or out of view: a long, gentle settle in, an even exit */
  --duration-enter:   520ms;
  --duration-exit:    400ms;
  --ease-enter:       cubic-bezier(.22, 1, .36, 1);
  --ease-exit:        cubic-bezier(.4, 0, .2, 1);

  /* ── Z-INDEX ──────────────────────────────────────── */
  --z-dropdown: 200;
  --z-sticky:   400;
  --z-panel:    600;
  --z-modal:    800;
  --z-popover:  900;    /* body-mounted popovers, such as the calendar, that must clear modals */
  --z-toast:    1000;
  --z-tooltip:  1200;

  /* ── SIZING ───────────────────────────────────────── */
  --control-height:      32px;
  --control-height-lg:   40px;
  --app-header-height:   0px;
  --side-nav-width:      215px;
  --content-max-width:   1200px;
  --modal-width-sm:      400px;
  --modal-width-lg:      520px;
  --picker-width:        680px;
  --picker-height:       540px;
  --panel-width:         400px;
  --panel-bar-height:    56px;
  --toast-width:         280px;
  --tooltip-max-width:   280px;
  --menu-width:          210px;
  --dropdown-max-height: 240px;
  --filter-min-width:    160px;
  --table-row-height:    36px;
  --textarea-min-height: 80px;
  --calendar-width:      380px;
  --calendar-height:     300px;
  --calendar-rail-width: 64px;
  --chart-height:        280px;
  --chart-height-sm:     220px;

  /* Small fixed parts */
  --border-width:          1px;
  --focus-outline-width:   2px;
  --indicator-width:       2px;   /* tab and nav underlines */
  --alert-accent-width:    3px;
  --check-size:            16px;
  --check-icon-size:       10px;
  --radio-dot-size:        8px;
  --toggle-width:          40px;
  --toggle-height:         22px;
  --toggle-knob-size:      18px;
  --avatar-size-sm:        24px;
  --spinner-size:          14px;
  --skeleton-text-height:  12px;
  --opacity-disabled:      .45;
}
}

@layer tokens {
:root {
  color-scheme: light;

  /* Surfaces */
  --bg-page:     var(--brand-mist);
  --bg-surface:  var(--white);
  --bg-subtle:   var(--gray-50);
  --bg-muted:    var(--navy-100);
  --bg-hover:    var(--navy-50);
  --bg-selected: var(--color-primary-100);
  --bg-inverse:  var(--navy-900);
  --bg-scrim:    color-mix(in srgb, var(--navy-950) 50%, transparent);

  /* Text */
  --text-strong:      var(--navy-900);
  --text-default:     var(--navy-800);
  --text-muted:       var(--navy-600);
  --text-placeholder: var(--gray-500);
  --text-inverse:     var(--white);
  --text-link:        var(--color-primary-700);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-500);
  --border-focus:   var(--color-primary-700);

  /* Interactive */
  --interactive-bg:             var(--navy-900);
  --interactive-bg-hover:       var(--navy-800);
  --interactive-fg:             var(--white);
  --interactive-quiet-bg:       var(--gray-200);
  --interactive-quiet-bg-hover: var(--gray-300);
  --interactive-quiet-fg:       var(--text-default);
  --overlay-hover:              color-mix(in srgb, currentColor 12%, transparent);

  /* Status */
  --success-bg: var(--success-100);  --success-fg: var(--success-500);
  --warning-bg: var(--warning-100);  --warning-fg: var(--warning-500);
  --danger-bg:  var(--danger-100);   --danger-fg:  var(--danger-500);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 35%, transparent);

  /* Elevation roles */
  --elevation-card:     none;
  --elevation-dropdown: var(--shadow-md);
  --elevation-panel:    var(--shadow-lg);
  --elevation-modal:    var(--shadow-overlay);
  --elevation-toast:    var(--shadow-md);

  /* Radius role for round things (the rest are in §2) */
  --radius-avatar: var(--radius-circle);

  /* ── Tier 3: component tokens ──
     Toasts and tooltips paint on --bg-inverse, which flips with the theme,
     so everything painted on it flips too. */
  --btn-padding-x:    var(--space-4);   /* edge to content, both sides */
  --btn-gap:          var(--space-2);   /* icon to label                */
  --avatar-bg:        var(--color-primary-100);
  --avatar-fg:        var(--color-primary-700);
  --toggle-knob:      var(--white);
  --toast-fg-muted:   var(--navy-400);
  --toast-success-fg: var(--success-300);
  --toast-warning-fg: var(--warning-300);
  --toast-danger-fg:  var(--danger-300);
  --tooltip-fg-muted: var(--navy-400);
  --logo-ink:         var(--brand-navy);
  --logo-accent:      var(--brand-teal);

  /* Charts (§10) */
  --series-1: var(--color-primary-500);
  --series-2: var(--viz-gold);
  --series-3: var(--viz-violet);
  --series-4: var(--viz-green);
  --series-5: var(--viz-magenta);
  --series-6: var(--viz-coral);
  --series-7: var(--viz-blue);
  --series-8: var(--viz-orange);
  --series-other: var(--gray-400);
  --chart-seq-1: var(--color-primary-100);
  --chart-seq-2: var(--color-primary-300);
  --chart-seq-3: var(--color-primary-500);
  --chart-seq-4: var(--color-primary-700);
  --chart-seq-5: var(--color-primary-900);
  --chart-grid: var(--border-subtle);
  --chart-axis: var(--border-default);
  --chart-text: var(--text-muted);
}
}

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

  --bg-page:     var(--navy-950);
  --bg-surface:  var(--navy-900);
  --bg-subtle:   var(--navy-850);
  --bg-muted:    var(--navy-800);
  --bg-hover:    var(--navy-850);
  --bg-selected: color-mix(in srgb, var(--color-primary-500) 12%, var(--navy-900));
  --bg-inverse:  var(--brand-mist);
  --bg-scrim:    color-mix(in srgb, var(--navy-950) 75%, transparent);

  --text-strong:      var(--brand-mist);
  --text-default:     var(--navy-200);
  --text-muted:       var(--navy-400);
  --text-placeholder: var(--navy-500);
  --text-inverse:     var(--navy-900);
  --text-link:        var(--color-primary-500);

  --border-subtle:  var(--navy-800);
  --border-default: var(--navy-700);
  --border-strong:  var(--navy-500);
  --border-focus:   var(--color-primary-500);

  /* The fill swaps hue in dark mode: teal with navy text */
  --interactive-bg:             var(--color-primary-500);
  --interactive-bg-hover:       var(--color-primary-300);
  --interactive-fg:             var(--navy-900);
  --interactive-quiet-bg:       var(--navy-800);
  --interactive-quiet-bg-hover: var(--navy-700);

  /* Light tints don't survive on dark: mix the hue into the surface instead */
  --success-bg: color-mix(in srgb, var(--success-300) 16%, var(--navy-900));  --success-fg: var(--success-300);
  --warning-bg: color-mix(in srgb, var(--warning-300) 16%, var(--navy-900));  --warning-fg: var(--warning-300);
  --danger-bg:  color-mix(in srgb, var(--danger-300) 16%, var(--navy-900));   --danger-fg:  var(--danger-300);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 45%, transparent);

  --elevation-dropdown: var(--shadow-md-dark);
  --elevation-panel:    var(--shadow-lg-dark);
  --elevation-modal:    var(--shadow-overlay-dark);
  --elevation-toast:    var(--shadow-md-dark);

  --avatar-bg:        color-mix(in srgb, var(--color-primary-500) 30%, var(--navy-900));
  --avatar-fg:        var(--color-primary-100);
  --toast-fg-muted:   var(--navy-600);
  --toast-success-fg: var(--success-500);
  --toast-warning-fg: var(--warning-500);
  --toast-danger-fg:  var(--danger-500);
  --tooltip-fg-muted: var(--navy-600);
  --logo-ink:         var(--brand-mist);

  --series-2: var(--viz-gold-dark);
  --series-3: var(--viz-violet-dark);
  --series-4: var(--viz-green-dark);
  --series-5: var(--viz-magenta-dark);
  --series-6: var(--viz-coral-dark);
  --series-7: var(--viz-blue-dark);
  --series-8: var(--viz-orange-dark);
  --series-other: var(--navy-500);
}
}

@layer tokens {
@supports (color: oklch(from red l c h)) {
  :root {
    --color-primary-100: oklch(from var(--color-primary-500) .93 calc(c * .22) h);
    --color-primary-300: oklch(from var(--color-primary-500) .75 calc(c * .72) h);
    --color-primary-700: oklch(from var(--color-primary-500) .49 c h);
    --color-primary-900: oklch(from var(--color-primary-500) .32 calc(c * .8) h);
    /* Series 1 is the brand, clamped into each theme's validated lightness band */
    --series-1: oklch(from var(--color-primary-500) clamp(.43, l, .77) c h);
  }
  :root[data-theme="dark"] {
    --series-1: oklch(from var(--color-primary-500) clamp(.55, l, .80) c h);
  }
}
}

/* §5 Motion: with Reduce Motion on, nothing moves and nothing waits. */
@layer base {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
  }
}