/* ============================================================
   BoutRoom — Design tokens
   Tuxedo black · light grey · BoutRoom red
   Source: Design system/extracted/tokens_zip — adapted for BoutRoom
   ============================================================ */

:root {
  /* ---- Neutral ink scale (cool-neutral grays -> near black) ---- */
  --white:    #FFFFFF;
  --ink-25:   #FAFAF9;
  --ink-50:   #F4F4F2;
  --ink-100:  #ECECE9;
  --ink-200:  #DEDEDA;
  --ink-300:  #C4C4BF;
  --ink-400:  #9A9A93;
  --ink-500:  #6C6C64;
  --ink-600:  #47473F;
  --ink-700:  #2B2B26;
  --ink-800:  #19191B;
  --ink-900:  #0E0E10;

  /* ---- BoutRoom red scale (primary brand accent) ----
     Distinct from corner red (#E5484D) — that stays reserved for fighter
     corners. This red is the product/brand accent: buttons, links,
     active states, highlights. */
  --red-100: #FBE4E5;
  --red-200: #F7C5C6;
  --red-300: #F0989B;
  --red-400: #E8585B;
  --red-500: #E02022;  /* primary brand red */
  --red-600: #B51A1C;  /* hover / pressed */
  --red-700: #861314;  /* deep red / text-safe on light */
  --red-rgb: 224, 32, 34;

  --brand-red: var(--red-500);

  /* ---- Semantic aliases ---- */
  --bg-page:        #F4F5F7;  /* BoutRoom light grey */
  --bg-sunken:      var(--ink-50);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-ink:    var(--ink-900);  /* sidebar, dark nav, dark sections */
  --surface-ink-2:  var(--ink-800);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-disabled:  var(--ink-400);
  --text-on-ink:        rgba(255,255,255,.92);
  --text-on-ink-muted:  rgba(255,255,255,.55);
  --text-on-ink-faint:  rgba(255,255,255,.32);
  --text-on-accent: #fff;

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-ink:     rgba(255,255,255,.10);

  --accent:        var(--red-500);
  --accent-hover:  var(--red-600);
  --accent-strong: var(--red-700);
  --accent-soft:   var(--red-100);
  --accent-on-ink: var(--red-400);

  /* ---- Fighter corners (reserved — corners only, never decoration) ---- */
  --corner-red:       #E5484D;
  --corner-red-soft:  #FDECEC;
  --corner-blue:      #3E63DD;
  --corner-blue-soft: #ECF0FD;

  --link:          var(--ink-900);
  --link-hover:    var(--red-700);
  --focus-ring:    rgba(var(--red-rgb), .35);
  --overlay:       rgba(14, 14, 16, .55);

  /* ---- Typography ---- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;

  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --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;

  /* ---- Radii ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-black based) ---- */
  --shadow-xs: 0 1px 2px rgba(14,14,16,.06);
  --shadow-sm: 0 2px 8px rgba(14,14,16,.08), 0 1px 2px rgba(14,14,16,.06);
  --shadow-md: 0 4px 16px rgba(14,14,16,.10), 0 1px 3px rgba(14,14,16,.06);
  --shadow-lg: 0 12px 32px rgba(14,14,16,.14), 0 2px 6px rgba(14,14,16,.08);
  --shadow-xl: 0 24px 56px rgba(14,14,16,.20);
  --shadow-accent: 0 2px 14px rgba(var(--red-rgb),.35);

  /* ---- Motion ---- */
  --ease-out:      cubic-bezier(.22,.61,.36,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
  --dur-slow: 0.35s;
}