/**
 * Unleeshed Design System v2.0 — Token Overlay
 * ----------------------------------------------
 * Loaded AFTER /css/tokens.css (the auto-generated Figma pipeline output).
 * This file is the runtime source of truth for the design refresh.
 *
 * It does three things:
 *   1) Defines all NEW short-form tokens (color-accent-*, --rd-pill, --shadow-*,
 *      --duration-*, etc.) that the new design system introduces.
 *   2) Corrects mis-mapped legacy tokens (e.g. --color-borders-dividers-border-default
 *      was #6b7280 — should be #e7e8ea, which is what every component already used
 *      via inline hex). This fix flows through 100+ files that consume the legacy var.
 *   3) Aliases legacy long-form tokens to the new short-form values where the
 *      design refresh updated the underlying value (status colors, text colors,
 *      borders). One sprint of aliasing → remove the long-form on the second sprint.
 *
 * Naming convention (new): --{category}-{subcategory}-{property}-{variant}
 * Pipeline note: the auto-generated Figma → tokens.json → resolved/*.json →
 * /css/tokens.css pipeline is intentionally untouched. New tokens live ONLY
 * in this overlay until they are upstreamed into Figma in a future sprint.
 */

:root {

  /* ─────────────────────────────────────────
     BRAND
  ───────────────────────────────────────── */
  --color-brand-primary:              #6179fa;
  --color-brand-primary-hover:        #576de1;
  --color-brand-primary-active:       #4e61c8;
  --color-brand-primary-subtle:       #eff2ff;
  --color-brand-primary-subtle-hover: #e7ebfe;
  --color-brand-secondary:            #61ccfa;
  --color-brand-secondary-hover:      #57b8e1;
  --color-brand-secondary-active:     #4ea3c8;
  --color-brand-secondary-subtle:     #effaff;

  /* ─────────────────────────────────────────
     PATH / SURFACE-CONTEXT ACCENTS
     Each surface in the platform has its own
     accent identity. The accent drives:
     eyebrows, icon tiles, focus rings, CTAs,
     hover borders, and segmented active states.
  ───────────────────────────────────────── */

  /* Studio — Full Analysis (brand blue) */
  --color-accent-full:           #6179fa;
  --color-accent-full-subtle:    #eff2ff;

  /* Studio — Just Research (lavender) */
  --color-accent-research:       #a78bfa;
  --color-accent-research-subtle:#f5f3ff;

  /* Studio — Just Graphics (amber) */
  --color-accent-graphics:       #f59e0b;
  --color-accent-graphics-subtle:#fffbeb;

  /* Persona Studio (cyan — "your voice") */
  --color-accent-persona:        #06b6d4;
  --color-accent-persona-subtle: #ecfeff;

  /* Tournaments (rose — "competition") */
  --color-accent-tournament:        #f43f5e;
  --color-accent-tournament-subtle: #fff1f2;

  /* Challenges (emerald — "achievement") */
  --color-accent-challenge:        #10b981;
  --color-accent-challenge-subtle: #ecfdf5;

  /* ─────────────────────────────────────────
     SEMANTIC / FEEDBACK STATUS
     Each has: bg / border / text / icon variants
  ───────────────────────────────────────── */
  --color-status-success-bg:     #ecfdf5;
  --color-status-success-border: #6ee7b7;
  --color-status-success-text:   #065f46;
  --color-status-success-icon:   #10b981;

  --color-status-warning-bg:     #fffbeb;
  --color-status-warning-border: #fcd34d;
  --color-status-warning-text:   #92400e;
  --color-status-warning-icon:   #f59e0b;

  --color-status-error-bg:       #fef2f2;
  --color-status-error-border:   #fca5a5;
  --color-status-error-text:     #991b1b;
  --color-status-error-icon:     #ef4444;

  --color-status-info-bg:        #eff2ff;
  --color-status-info-border:    #a5b4fc;
  --color-status-info-text:      #3730a3;
  --color-status-info-icon:      #6179fa;

  /* ─────────────────────────────────────────
     TEXT / CONTENT
  ───────────────────────────────────────── */
  --color-text-primary:          #0f172a;
  --color-text-secondary:        rgba(15, 23, 42, 0.70);
  --color-text-subtle:           rgba(15, 23, 42, 0.50);
  --color-text-placeholder:      rgba(15, 23, 42, 0.35);
  --color-text-inverse:          #ffffff;
  --color-text-link:             #6179fa;
  --color-text-link-hover:       #576de1;
  --color-text-error:            #991b1b;
  --color-text-success:          #065f46;
  --color-text-disabled:         rgba(15, 23, 42, 0.30);

  /* ─────────────────────────────────────────
     SURFACES
  ───────────────────────────────────────── */
  --color-surface-default:       #ffffff;
  --color-surface-elevated:      #ffffff;
  --color-surface-subtle:        rgba(15, 23, 42, 0.025);
  --color-surface-tinted:        rgba(15, 23, 42, 0.04);
  --color-surface-inverse:       #0f172a;
  --color-surface-disabled:      #f1f5f9;

  /* ─────────────────────────────────────────
     BORDERS / DIVIDERS
     Note: --color-border-default is #e7e8ea (the value 100+ components
     hard-coded). The legacy long-form token is corrected below.
  ───────────────────────────────────────── */
  --color-border-default:        #e7e8ea;
  --color-border-subtle:         #f1f3f5;
  --color-border-strong:         #cbd5e1;
  --color-border-active:         #6179fa;
  --color-border-error:          #ef4444;
  --color-border-success:        #10b981;
  --color-border-input:          #e7e8ea;
  --color-border-input-focus:    #6179fa;

  /* ─────────────────────────────────────────
     BUTTONS
  ───────────────────────────────────────── */
  --color-button-primary-bg:          #6179fa;
  --color-button-primary-bg-hover:    #576de1;
  --color-button-primary-bg-active:   #4e61c8;
  --color-button-primary-text:        #ffffff;

  --color-button-secondary-bg:        #ffffff;
  --color-button-secondary-bg-hover:  #eff2ff;
  --color-button-secondary-border:    #e7e8ea;
  --color-button-secondary-text:      #0f172a;

  --color-button-tertiary-bg:         transparent;
  --color-button-tertiary-text:       rgba(15, 23, 42, 0.60);
  --color-button-tertiary-hover-text: #6179fa;

  --color-button-black-bg:            #0f172a;
  --color-button-black-bg-hover:      #1e293b;
  --color-button-black-text:          #ffffff;

  --color-button-danger-bg:           #ef4444;
  --color-button-danger-bg-hover:     #dc2626;
  --color-button-danger-text:         #ffffff;

  --color-button-disabled-bg:         #e7e8ea;
  --color-button-disabled-text:       rgba(15, 23, 42, 0.35);

  /* ─────────────────────────────────────────
     MARKETING SIBLING OVERRIDES
     Applied when body has [data-surface="marketing"]
  ───────────────────────────────────────── */
  --color-marketing-bg-hero:     #0f172a;
  --color-marketing-bg-section:  #f8fafc;
  --color-marketing-text-hero:   #ffffff;
  --color-marketing-accent:      #6179fa;
  --color-marketing-gradient:    linear-gradient(135deg, #6179fa 0%, #a78bfa 100%);

  /* ─────────────────────────────────────────
     SIZES — SPACING (px-suffixed, short names)
     Old tokens in /css/tokens.css are unitless
     numbers (e.g. --sizes-spacing-sp-16: 16) which
     is a known issue. These short forms include px.
  ───────────────────────────────────────── */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-14:  14px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-52:  52px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-120: 120px;
  --sp-160: 160px;
  --sp-200: 200px;

  /* ─────────────────────────────────────────
     SIZES — RADII
  ───────────────────────────────────────── */
  --rd-6:    6px;
  --rd-8:    8px;
  --rd-10:   10px;
  --rd-12:   12px;
  --rd-14:   14px;
  --rd-16:   16px;
  --rd-20:   20px;
  --rd-24:   24px;
  --rd-32:   32px;
  --rd-40:   40px;
  --rd-pill: 999px;

  /* ─────────────────────────────────────────
     SIZES — BORDERS
  ───────────────────────────────────────── */
  --br-1: 1px;
  --br-2: 2px;

  /* ─────────────────────────────────────────
     SIZES — ICON
  ───────────────────────────────────────── */
  --is-12: 12px;
  --is-14: 14px;
  --is-16: 16px;
  --is-18: 18px;
  --is-20: 20px;
  --is-24: 24px;
  --is-32: 32px;
  --is-48: 48px;

  /* ─────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────── */
  --font-family-heading: 'Manrope', system-ui, sans-serif;
  --font-family-body:    'Manrope', system-ui, sans-serif;
  --font-family-code:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-72: 72px;

  /* Fluid display heading */
  --font-size-display: clamp(26px, 3.6vw, 36px);
  --font-size-h2:      clamp(20px, 2.4vw, 24px);

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

  --leading-tight:   1.15;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.55;
  --leading-loose:   1.7;

  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.18em;

  /* ─────────────────────────────────────────
     SHADOWS / ELEVATION
  ───────────────────────────────────────── */
  --shadow-resting:   0 2px 12px rgba(15, 23, 42, 0.04);
  --shadow-raised:    0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-floating:  0 12px 28px rgba(15, 23, 42, 0.10);
  --shadow-overlay:   0 24px 48px rgba(15, 23, 42, 0.16);

  --shadow-hover-card-brand:  0 12px 28px color-mix(in srgb, #6179fa 18%, transparent);
  --shadow-hover-btn-brand:   0 8px 20px  color-mix(in srgb, #6179fa 28%, transparent);
  --shadow-focus-ring-brand:  0 0 0 3px   color-mix(in srgb, #6179fa 18%, transparent);

  --shadow-inset-active: 0 0 0 3px color-mix(in srgb, #6179fa 18%, transparent);

  /* ─────────────────────────────────────────
     MOTION
  ───────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-slow:   280ms;
  --duration-xslow:  400ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1.0, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────── */
  --layout-max-width:           1180px;
  --layout-padding-desktop:     32px 24px 64px;
  --layout-padding-mobile:      24px 16px 64px;
  --layout-section-gap:         24px;
  --layout-card-padding:        24px;
  --layout-card-padding-inner:  16px;

  /* ─────────────────────────────────────────
     DENSITY (default = comfortable)
  ───────────────────────────────────────── */
  --density-row-height:        48px;
  --density-cell-padding-v:    12px;
  --density-cell-padding-h:    16px;
  --density-font-size-row:     14px;
  --density-row-gap:           8px;

  /* ─────────────────────────────────────────
     LEGACY ALIAS OVERRIDES — CORRECTING MIS-MAPS
     These three legacy long-form names are ACTIVELY USED across 100+ files
     but were mis-mapped to the wrong values in /css/tokens.css. Override
     them here to point to the corrected new values.
  ───────────────────────────────────────── */
  --color-borders-dividers-border-default: var(--color-border-default);
  --color-borders-dividers-border-subtle:  var(--color-border-subtle);
  --color-borders-dividers-border-input:   var(--color-border-input);

  /* ─────────────────────────────────────────
     LEGACY ALIAS FORWARD-MIGRATION
     Long-form names that the design refresh updated. Aliasing them to
     the new short-form values means existing components automatically
     pick up the new design system without per-file changes.
     Drop these aliases after components migrate to short names.
  ───────────────────────────────────────── */

  /* Status (was non-standard names + wrong values) */
  --color-status-colors-feedback-alerts-status-success-bg:     var(--color-status-success-bg);
  --color-status-colors-feedback-alerts-status-success-border: var(--color-status-success-border);
  --color-status-colors-feedback-alerts-status-success-text:   var(--color-status-success-text);
  --color-status-colors-feedback-alerts-status-warning-bg:     var(--color-status-warning-bg);
  --color-status-colors-feedback-alerts-status-warning-border: var(--color-status-warning-border);
  --color-status-colors-feedback-alerts-status-warning-text:   var(--color-status-warning-text);
  --color-status-colors-feedback-alerts-status-error-bg:       var(--color-status-error-bg);
  --color-status-colors-feedback-alerts-status-error-border:   var(--color-status-error-border);
  --color-status-colors-feedback-alerts-status-error-text:     var(--color-status-error-text);
  --color-status-colors-feedback-alerts-status-info-bg:        var(--color-status-info-bg);
  --color-status-colors-feedback-alerts-status-info-border:    var(--color-status-info-border);
  --color-status-colors-feedback-alerts-status-info-text:      var(--color-status-info-text);

  /* Surfaces */
  --color-backgrounds-surfaces-bg-default:     var(--color-surface-default);
  --color-backgrounds-surfaces-bg-subtle:      var(--color-surface-subtle);
  --color-backgrounds-surfaces-bg-elevated:    var(--color-surface-elevated);
  --color-backgrounds-surfaces-bg-inverse:     var(--color-surface-inverse);
  --color-backgrounds-surfaces-surface-primary:   var(--color-surface-default);
  --color-backgrounds-surfaces-surface-secondary: var(--color-surface-subtle);
  --color-backgrounds-surfaces-surface-neutral:   var(--color-surface-tinted);

  /* Text */
  --color-text-content-text-primary:     var(--color-text-primary);
  --color-text-content-text-secondary:   var(--color-text-secondary);
  --color-text-content-text-inverse:     var(--color-text-inverse);
  --color-text-content-text-placeholder: var(--color-text-placeholder);
  --color-text-content-text-link:        var(--color-text-link);
}

/* ─────────────────────────────────────────
   TABLET OVERRIDES
─────────────────────────────────────────── */
[data-mode="Tablet"] {
  --layout-card-padding: 20px;
  --font-size-display:   clamp(22px, 3vw, 28px);
}

/* ─────────────────────────────────────────
   MOBILE OVERRIDES
─────────────────────────────────────────── */
[data-mode="Mobile"] {
  --layout-card-padding: 16px;
  --font-size-display:   clamp(20px, 5vw, 26px);
  --font-size-h2:        20px;
  --layout-section-gap:  16px;
}

/* ─────────────────────────────────────────
   COMPACT DENSITY OVERRIDE
   Apply data-density="compact" to any ancestor.
─────────────────────────────────────────── */
[data-density="compact"] {
  --density-row-height:        36px;
  --density-cell-padding-v:    8px;
  --density-cell-padding-h:    12px;
  --density-font-size-row:     13px;
  --density-row-gap:           4px;
  --sp-24: 16px;
  --sp-20: 12px;
}

/* ─────────────────────────────────────────
   REDUCED MOTION
─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-xslow:  0ms;
    --ease-standard:   linear;
    --ease-decelerate: linear;
    --ease-accelerate: linear;
    --ease-spring:     linear;
  }
}

/* ─────────────────────────────────────────
   GLOBAL UTILITY KEYFRAMES (design system)
─────────────────────────────────────────── */
@keyframes ds-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.ds-skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%);
  background-size: 800px 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--rd-8);
}

@keyframes ds-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ds-spin { animation: ds-spin 0.9s linear infinite; }