/* ==========================================================================
   MOTHERLOAD DESIGN SYSTEM - TOKENS
   Motherload is a game studio publishing arcade games on chain. This is the
   studio website.

   Theme: black, single theme. No light mode. Every colour is painted
   explicitly.

   Colour law: black carries the page, white carries the words, red carries
   the action. Red is spent on primary actions and brand moments only. It is
   never used to colour a number, because on a treasury page red already
   means "down".
   ========================================================================== */

:root {

  /* ======================================================================
     1. GROUND AND SURFACES
     A true black page. Surfaces step up in small neutral increments, so a
     card separates from the page by a hairline and a whisper of lift, not
     by contrast.
     ====================================================================== */

  --bg:          #000000;   /* page                                  */
  --bg-deep:     #070707;   /* inset wells: inputs, tracks, demos    */

  --card:        #0d0d0d;   /* primary surface                       */
  --card-hover:  #121212;
  --card-raised: #171717;   /* popovers, row hover, modal interiors  */

  --white:       #ffffff;
  --black:       #000000;

  /* ======================================================================
     2. TEXT
     Off-white for reading, pure white reserved for fills (secondary
     buttons) and the highest-emphasis figures. All three levels pass WCAG
     AA at body size on black, on cards, and on raised surfaces; ratios
     below are measured, not estimated.
     ====================================================================== */

  --text:     #f5f5f5;   /* 19.3 black / 17.9 card    headings, primary */
  --muted:    #a3a3a3;   /*  8.3 black /  7.7 card    secondary text    */
  --muted-2:  #808080;   /*  5.3 black /  4.9 card / 4.5 raised  metadata */

  --text-a92: #f5f5f5eb;
  --text-a70: #f5f5f5b3;
  --text-a50: #f5f5f580;
  --text-a45: #f5f5f573;   /* about 4.0:1, below AA: legal lines only */

  /* ======================================================================
     3. BRAND RED
     --brand is the fill for primary actions. It is too dark to read as
     text on black (3.3:1), so red text, links and icons use --brand-text
     instead (5.9:1). Never swap them.
     ====================================================================== */

  --brand:        #c40000;   /* primary action fill. white on it: 6.3:1 */
  --brand-hover:  #dc0f0f;   /* white on it: 5.1:1                       */
  --brand-active: #a30000;   /* white on it: 8.2:1                       */
  --brand-text:   #ff3b3b;   /* red text on black 5.9:1, on card 5.5:1   */
  --on-brand:     #ffffff;

  --brand-a12:    #c400001f;
  --brand-a24:    #c400003d;

  /* ======================================================================
     4. LINES AND FOCUS
     White at low alpha. On a true black ground these sit a step higher
     than they would on a tinted dark, or they disappear.
     ====================================================================== */

  --border:        #ffffff14;   /*  8% white */
  --border-strong: #ffffff29;   /* 16% white */
  --ring-detail:   #ffffff3d;   /* 24% white */
  --focus:         #ffffff;     /* keyboard focus, always white */

  --surface-nav:     #ffffff0a;
  --surface-control: #ffffff14;

  /* ======================================================================
     5. STATUS
     Separate from the brand. --neg is a soft coral, deliberately lighter
     and warmer than --brand-text so a falling number is never mistaken for
     a call to action, and it always travels with a minus sign or down
     arrow so colour is never the only signal.
     ====================================================================== */

  --pos:  #4ade80;   /* 12.1:1 */
  --neg:  #ff7b72;   /*  8.3:1 */
  --live: #3dff7a;   /* live indicators and status dots only */
  --warn: #ffb43c;   /* wallet warnings and error states only */

  /* ======================================================================
     6. SCALES
     Neutral for data (bar fills, series keys, tracks). Red for brand
     surfaces that need more than one step, such as hover washes and
     illustration. Grays are pure neutral: no tint.
     ====================================================================== */

  --gray-1:  #0a0a0a;
  --gray-2:  #111111;
  --gray-3:  #171717;
  --gray-4:  #1f1f1f;
  --gray-5:  #262626;
  --gray-6:  #333333;
  --gray-7:  #404040;
  --gray-8:  #525252;
  --gray-9:  #737373;
  --gray-10: #8f8f8f;
  --gray-11: #a3a3a3;
  --gray-12: #ededed;

  --red-1:  #140000;
  --red-2:  #1f0000;
  --red-3:  #2e0000;
  --red-4:  #420000;
  --red-5:  #5c0000;
  --red-6:  #7a0000;
  --red-7:  #9c0000;
  --red-8:  #c40000;   /* = --brand */
  --red-9:  #dc0f0f;
  --red-10: #ff3b3b;   /* = --brand-text */
  --red-11: #ff8a80;
  --red-12: #ffd6d3;

  /* Why-deck panel fills, alternating slate and night as the cards stack.
     Never data, never an action. Ink on both is white: 10.6:1 on
     --why-slate, 16.5:1 on --why-night. */
  --why-slate: #3f3d4b;
  --why-night: #1e1e2a;
  --why-ink:   #ffffff;

  /* ======================================================================
     7. TYPOGRAPHY
     Geist carries the interface; Geist Mono carries every numeral, every
     data table, and anything a person copies or verifies. Designed as a
     pair. Variable 100-900, OFL licensed.
     ====================================================================== */

  --font-sans:    "Geist", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Geist", -apple-system, sans-serif;

  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-md:   0.875rem;   /* 14px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  --text-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
  --text-num:  clamp(2rem, 1.5rem + 2.4vw, 3rem);

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.03em;
  --tracking-label:    0.1em;

  --measure: 68ch;

  /* ======================================================================
     8. SPACE - 4px base
     ====================================================================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --gutter: var(--space-5);

  /* ======================================================================
     8b. STUDIO FRAME
     The site-level layout: black panels on a grey ground, separated by
     exactly 1px, so the ground reads as a hairline between every panel.
     All values are fluid and resolve at 1440px to the figures in brackets.

     --frame is chosen by contrast, not by eye: it sits at 1.9:1 against
     black, the same ratio the reference layout's separator holds against
     its panels, so the lines carry the same weight.
     ====================================================================== */

  --frame:     #3b3b3b;

  /* Floor is 3.5rem, not 3rem: phones need the extra 8px so the CTA and
     menu button keep a 38px tap height inside the bar's even inset. The
     floor only applies below ~1203px wide; at 1440 the value is unchanged. */
  --nav-h:     clamp(3.5rem, calc(0.143rem + 4.464vw), 5.5rem);        /* 66.6  */

  --pad-xs:    clamp(0.25rem, calc(-0.036rem + 0.446vw), 0.5rem);      /*  5.9  */
  --pad-base:  clamp(0.5rem, calc(-0.071rem + 0.893vw), 1rem);         /* 11.7  */
  --pad-md:    clamp(1rem, calc(-0.143rem + 1.786vw), 2rem);           /* 23.4  */
  --pad-xl:    clamp(2rem, calc(-0.286rem + 3.571vw), 4rem);           /* 46.8  */
  --pad-4xl:   clamp(5rem, calc(-0.734rem + 9.174vw), 10rem);          /* 120.4 */

  --radius-panel: clamp(1rem, calc(-0.143rem + 1.786vw), 2rem);        /* 23.4  */
  --radius-2xl:   clamp(0.625rem, calc(0.196rem + 0.67vw), 1rem);      /* 12.8  */

  /* Large cut, for panels rather than buttons. */
  --cut-lg:        clamp(4.5rem, calc(-0.071rem + 7.143vw), 8.5rem);   /* 101.7 */
  --cut-lg-round:  clamp(0.75rem, calc(-0.107rem + 1.339vw), 1.5rem);  /* 17.6  */

  --fs-nav:        clamp(0.75rem, 0.897vw, 0.875rem);                  /* 12.9  */
  --fs-body-lg:    clamp(0.875rem, 1.092vw, 1.125rem);                 /* 15.7  */
  --fs-num:        clamp(1rem, 1.295vw, 1.25rem);                      /* 18.6  */
  --fs-card-title: clamp(2rem, calc(0.857rem + 1.786vw), 3rem);        /* 39.4  */
  --fs-mega:       clamp(3.5rem, 10.07vw, 11rem);                      /* 145   */
  /* ======================================================================
     9. SHAPE
     Two button geometries, never mixed within a role:

     Action buttons (primary, secondary) use the cut-corner shape: rounded
     rectangle, bottom-right corner cut at 45 degrees, both ends of the cut
     softened. Fluid; at 1440px it resolves to 12.8px / 26.4px / 4.9px.

     Normal buttons (utilities, filters, tabs, dialog controls) use a small
     radius of roughly 15% of their height. Nothing interactive is a pill.
     Full rounding is kept for things that are genuinely circular: status
     dots, icon rings, the sheet handle.
     ====================================================================== */

  --shape-radius:       clamp(0.625rem, 0.196rem + 0.67vw, 1rem);
  --shape-corner:       clamp(1.125rem, -0.161rem + 2.009vw, 2.25rem);
  --shape-corner-round: clamp(0.25rem, 0.107rem + 0.223vw, 0.375rem);

  --radius-control-sm: 4px;    /* 28px controls, 14% */
  --radius-control:    6px;    /* 40px controls, 15% */
  --radius-control-lg: 8px;    /* 48px controls, 17% */

  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;    /* popovers, toasts, notices */
  --radius-lg:   16px;    /* cards and panels          */
  --radius-nav:  18px;
  --radius-pill: 999px;   /* circular things only      */

  /* ======================================================================
     10. ELEVATION
     Shadows barely register on black, so floating objects separate by a
     lighter surface and a stronger hairline first, shadow second.
     ====================================================================== */

  --shadow-nav:   0 16px 48px #000000b3;
  --shadow-float: 0 20px 60px #000000cc;
  --shadow-lift:  0 2px 8px #00000080;

  /* ======================================================================
     11. OVERLAY
     ====================================================================== */

  --scrim:        #000000cc;
  --modal-bg:     var(--card);
  --modal-border: var(--border-strong);

  /* ======================================================================
     12. MOTION
     Three durations, two curves, one stagger. Content rises into place and
     sinks on exit, faster than it entered.
     ====================================================================== */

  --dur-quick: 160ms;
  --dur-base:  320ms;
  --dur-slow:  520ms;
  --stagger:    90ms;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --rise: 10px;

  /* ======================================================================
     13. LAYERING
     ====================================================================== */

  --z-sticky:   100;
  --z-popover:  400;
  --z-overlay: 1000;
  --z-toast:   1100;

  /* ======================================================================
     14. DEPRECATED ALIASES
     Names from the previous green palette, pointed at their nearest role in
     the new one so existing pages keep rendering coherently. Remove each
     one as the page that uses it is rebuilt. New work must not use them.
     ====================================================================== */

  --accent:      var(--brand-text);
  --accent-soft: var(--muted);

  --primary-1:  #0a0a0a;
  --primary-2:  #111111;
  --primary-3:  #171717;
  --primary-4:  #1f1f1f;
  --primary-5:  #262626;
  --primary-6:  #333333;
  --primary-7:  #404040;
  --primary-8:  #525252;
  --primary-9:  #d4d4d4;
  --primary-10: #e5e5e5;
  --primary-11: #a3a3a3;
  --primary-12: #f5f5f5;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 1ms;
    --dur-base:  1ms;
    --dur-slow:  1ms;
    --stagger:   0ms;
    --rise:      0px;
  }
}