/* ============================================================
   COLLECTABLE — Design System Foundations
   colors_and_type.css
   Brand: collectibles · "Invest in real assets"
   A perpetual derivatives exchange for graded collectibles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------
     RAW BRAND PALETTES (reference — from the brand sheet)
     --------------------------------------------------------- */
  /* Desert Green — muted, premium, real-asset feel */
  --desert-dark:   #202523;
  --desert-green:  #96A185;

  /* Lime Green — closest to the hero logo color */
  --lime-dark:     #637E66;
  --lime-light:    #BCE3C0;

  /* Leaf Green — vibrant, modern. Buttons / highlights / active */
  --leaf-dark:     #204A30;
  --leaf-bright:   #79FFAA;

  /* Crisp Green — tech / web3 feel. Gradients & digital UI */
  --crisp-dark:    #01322C;
  --crisp-green:   #00D9C0;

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS  (the working system)
     Dark, premium, quiet-luxury. Green used sparingly.
     --------------------------------------------------------- */
  --background:      #050706;  /* near-black canvas               */
  --background-2:    #0A0D0B;  /* alt section / sunken            */
  --surface:         #101411;  /* cards, panels                   */
  --surface-2:       #161B17;  /* raised surface, hover fill      */
  --surface-3:       #1D241F;  /* input fill, active row          */

  --primary:         #BCE3C0;  /* mint — primary brand / on-dark  */
  --primary-muted:   #96A185;  /* sage — secondary brand          */
  --accent:          #79FFAA;  /* leaf glow — CTAs, active, focus  */
  --accent-deep:     #204A30;  /* leaf dark — accent containers   */

  --text-main:       #FFFFFF;  /* headings, primary copy          */
  --text-secondary:  #C5CFC6;  /* sub-copy                        */
  --text-muted:      #9CA89E;  /* captions, labels, hints         */
  --text-faint:      #5C665E;  /* disabled, placeholders          */

  --border:          #202523;  /* hairline dividers / card edge   */
  --border-strong:   #2C3530;  /* hover border, inputs            */
  --border-accent:   rgba(121,255,170,0.40); /* focus ring        */

  /* Trading semantics */
  --long:            #79FFAA;  /* go long / up / profit           */
  --long-soft:       rgba(121,255,170,0.12);
  --short:           #FF6B79;  /* go short / down / loss          */
  --short-soft:      rgba(255,107,121,0.12);
  --warn:            #E8C26A;  /* funding / caution               */
  --info:            #6FA8FF;  /* neutral data / links            */

  /* Glow / accent gradient (use SPARINGLY) */
  --glow-mint:    radial-gradient(60% 60% at 50% 0%, rgba(121,255,170,0.18), transparent 70%); /* @kind color */
  --grad-accent:  linear-gradient(135deg, #BCE3C0 0%, #79FFAA 100%); /* @kind color */
  --grad-mark:    linear-gradient(150deg, #C7E8CB 0%, #96A185 55%, #4C5B4F 100%); /* @kind color */

  /* ---------------------------------------------------------
     TYPOGRAPHY
     Display/brand: Outfit (geometric rounded — nearest match
       to the custom wordmark). Body/UI: Inter. Numerals: JetBrains Mono.
     --------------------------------------------------------- */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-display: 600 64px/1.02 var(--font-display);
  --text-h1:      600 44px/1.06 var(--font-display);
  --text-h2:      500 32px/1.12 var(--font-display);
  --text-h3:      500 24px/1.2  var(--font-display);
  --text-title:   600 18px/1.3  var(--font-body);
  --text-body-lg: 400 18px/1.55 var(--font-body);
  --text-body:    400 15px/1.6  var(--font-body);
  --text-sm:      400 13px/1.5  var(--font-body);
  --text-label:   500 12px/1.3  var(--font-body);   /* + letter-spacing */
  --text-num:     500 15px/1.2  var(--font-mono);

  /* Letter spacing */
  --ls-brand:  0.16em;   /* logo / wordmark lockups            */
  --ls-label:  0.14em;   /* uppercase eyebrows / labels        */
  --ls-tight: -0.02em;   /* large display headings             */

  /* ---------------------------------------------------------
     RADII / SPACING / ELEVATION
     --------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Soft, low elevation — premium not floaty */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(121,255,170,0.25), 0 8px 32px rgba(121,255,170,0.18);
  --inset-hair:  inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS  (opt-in via .ds scope)
   ============================================================ */
.ds, .ds * { box-sizing: border-box; }

.ds {
  background: var(--background);
  color: var(--text-main);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1 { font: var(--text-h1); letter-spacing: var(--ls-tight); margin: 0; }
.ds h2 { font: var(--text-h2); letter-spacing: var(--ls-tight); margin: 0; }
.ds h3 { font: var(--text-h3); margin: 0; }
.ds p  { font: var(--text-body); color: var(--text-secondary); margin: 0; }

.ds .eyebrow {
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--primary-muted);
}
.ds .display { font: var(--text-display); letter-spacing: var(--ls-tight); }
.ds .num     { font: var(--text-num); font-variant-numeric: tabular-nums; }
.ds .logo    { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--ls-brand); text-transform: lowercase; }