/* ============================================================
   SHOPIFY DESIGN SYSTEM — colors_and_type.css
   CSS custom properties for colors, typography, and spacing.
   Font substitution: NeueHaasGrotesk → Helvetica Neue / Arial
   (flag: obtain licensed NeueHaasGrotesk variable font for production)
   Inter Variable loaded from Google Fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ── Fonts ──────────────────────────────────────────────── */

@font-face {
  font-family: 'NeueHaasGrotesk';
  src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial');
  /* ⚠️ Substitution: NeueHaasGrotesk not available; using Helvetica Neue.
     For production, license NeueHaasGrotesk Variable from Linotype.
     Key features lost: ss03 stylistic set, precise variable weight axis. */
  font-weight: 100 900;
  font-style: normal;
}

/* ── Color Tokens ───────────────────────────────────────── */

:root {

  /* === BACKGROUNDS / SURFACES === */
  --color-void:          #000000;   /* Root page background — true black */
  --color-deep-teal:     #02090A;   /* Card surfaces, content containers */
  --color-dark-forest:   #061A1C;   /* Section backgrounds */
  --color-forest:        #102620;   /* Elevated surfaces, nav on scroll */

  /* === PRIMARY / TEXT === */
  --color-white:         #FFFFFF;   /* Primary text, button fills */
  --color-black:         #000000;   /* Button text on white, max contrast */

  /* === ACCENT === */
  --color-neon-green:    #36F4A4;   /* Focus rings, accent highlights ONLY */
  --color-aloe:          #C1FBD4;   /* Soft green wash, decorative */
  --color-pistachio:     #D4F9E0;   /* Lightest green tint */

  /* === NEUTRALS (Zinc Scale) === */
  --color-shade-30:      #D4D4D8;   /* Lightest neutral, borders on dark */
  --color-muted:         #A1A1AA;   /* Secondary text, metadata */
  --color-shade-50:      #71717A;   /* Tertiary text, timestamps */
  --color-shade-60:      #52525B;   /* Disabled text */
  --color-shade-70:      #3F3F46;   /* Subtle dividers, input borders */
  --color-light-border:  #E4E4E7;   /* Borders on light surfaces */

  /* === BORDERS === */
  --color-border-dark:   #1E2C31;   /* Card borders on dark surfaces */
  --color-border-input:  #3F3F46;   /* Input borders */

  /* === LINK VARIANTS === */
  --color-link-muted:    #9797A2;
  --color-link-sage:     #9DABAD;
  --color-link-lavender: #BDBDCA;
  --color-link-mint:     #99B3AD;

  /* ── Semantic Color Aliases ─────────────────────────────── */

  --color-bg:            var(--color-void);
  --color-bg-card:       var(--color-deep-teal);
  --color-bg-section:    var(--color-dark-forest);
  --color-bg-elevated:   var(--color-forest);

  --color-text-primary:  var(--color-white);
  --color-text-secondary:var(--color-muted);
  --color-text-tertiary: var(--color-shade-50);
  --color-text-disabled: var(--color-shade-60);

  --color-accent:        var(--color-neon-green);
  --color-focus-ring:    var(--color-neon-green);

  --color-border:        var(--color-border-dark);

  /* ── Typography Scale ───────────────────────────────────── */

  --font-display:        'NeueHaasGrotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:           'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:           ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --font-feature-ss03:   'ss03' 1;   /* NeueHaasGrotesk stylistic set 3 */
  --font-feature-body:   'ss03' 1;   /* Also applied to Inter */

  /* SIZE tokens */
  --text-96:  96px;
  --text-90:  90.74px;
  --text-70:  70px;
  --text-55:  55px;
  --text-48:  48px;
  --text-32:  32px;
  --text-28:  28px;
  --text-24:  24px;
  --text-20:  20px;
  --text-18:  18px;
  --text-16:  16px;
  --text-15:  15.36px;
  --text-14:  14px;
  --text-13:  13px;
  --text-12:  12px;

  /* SEMANTIC TYPE ROLES */

  /* Display */
  --type-display-xl-size:     var(--text-96);
  --type-display-xl-weight:   400;
  --type-display-xl-lh:       1.00;
  --type-display-xl-ls:       0em;

  --type-display-xl-bold-size:   90.74px;
  --type-display-xl-bold-weight: 750;
  --type-display-xl-bold-lh:     1.00;
  --type-display-xl-bold-ls:     0.05em;

  --type-display-light-size:    var(--text-96);
  --type-display-light-weight:  330;
  --type-display-light-lh:      0.96;

  /* Headings */
  --type-h1-size:    var(--text-70);
  --type-h1-weight:  330;
  --type-h1-lh:      1.00;

  --type-h2-size:    var(--text-55);
  --type-h2-weight:  330;
  --type-h2-lh:      1.16;

  --type-h3-size:    var(--text-48);
  --type-h3-weight:  330;
  --type-h3-lh:      1.14;

  --type-h4-size:    var(--text-32);
  --type-h4-weight:  360;
  --type-h4-lh:      1.14;
  --type-h4-ls:      0.01em;

  --type-h5-size:    var(--text-28);
  --type-h5-weight:  500;
  --type-h5-lh:      1.28;
  --type-h5-ls:      0.015em;

  --type-h6-size:    var(--text-24);
  --type-h6-weight:  400;
  --type-h6-lh:      1.14;
  --type-h6-ls:      0.015em;

  /* Body */
  --type-body-lg-size:    var(--text-20);
  --type-body-lg-weight:  500;
  --type-body-lg-lh:      1.40;
  --type-body-lg-ls:      0.015em;

  --type-body-size:       var(--text-18);
  --type-body-weight:     400;
  --type-body-lh:         1.56;

  --type-body-med-size:   var(--text-18);
  --type-body-med-weight: 550;
  --type-body-med-lh:     1.56;

  --type-body-sm-size:    var(--text-16);
  --type-body-sm-weight:  400;
  --type-body-sm-lh:      1.50;

  --type-body-sm-med-size:   var(--text-16);
  --type-body-sm-med-weight: 420;
  --type-body-sm-med-lh:     1.50;

  /* UI Elements */
  --type-button-size:     var(--text-16);
  --type-button-weight:   400;
  --type-button-lh:       1.50;

  --type-nav-size:        var(--text-18);
  --type-nav-weight:      500;
  --type-nav-lh:          1.25;
  --type-nav-ls:          0.04em;

  --type-caption-size:    var(--text-14);
  --type-caption-weight:  500;
  --type-caption-lh:      1.49;
  --type-caption-ls:      0.02em;

  --type-caption-med-size:   var(--text-14);
  --type-caption-med-weight: 550;
  --type-caption-med-lh:     1.49;
  --type-caption-med-ls:     0.02em;

  --type-overline-size:   15.36px;
  --type-overline-weight: 400;
  --type-overline-lh:     1.50;
  --type-overline-ls:     0.1em;

  --type-micro-size:      var(--text-13);
  --type-micro-weight:    500;
  --type-micro-lh:        1.50;
  --type-micro-ls:        -0.01em;

  --type-label-size:      var(--text-12);
  --type-label-weight:    400;
  --type-label-lh:        1.20;
  --type-label-ls:        0.06em;

  --type-code-size:       var(--text-16);
  --type-code-weight:     400;
  --type-code-lh:         1.50;

  --type-code-sm-size:    var(--text-12);
  --type-code-sm-weight:  400;
  --type-code-sm-lh:      1.33;

  /* ── Spacing Scale (8px base) ───────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   28px;
  --space-7:   32px;
  --space-8:   36px;
  --space-9:   40px;
  --space-10:  64px;

  /* Semantic spacing */
  --space-section:     96px;    /* Between major page sections */
  --space-section-sm:  64px;    /* Compressed section gap */
  --space-container-px:64px;   /* Horizontal container padding (desktop) */
  --space-card-p:      24px;    /* Card inner padding */
  --space-card-gap:    24px;    /* Gap between cards */

  /* ── Border Radius Scale ────────────────────────────────── */

  --radius-xs:     4px;     /* Tags, badges, micro */
  --radius-sm:     8px;     /* Standard cards, inputs */
  --radius-md:     12px;    /* Featured cards, image containers */
  --radius-lg:     20px;    /* Top-rounded cards (use 20px 20px 0 0) */
  --radius-xl:     340px;   /* Large decorative elements */
  --radius-pill:   9999px;  /* Pill buttons — NON-NEGOTIABLE */

  /* ── Shadow / Elevation System ──────────────────────────── */

  --shadow-subtle:
    rgba(0,0,0,0.10) 0px 0px 0px 1px,
    rgba(255,255,255,0.03) 0px 1px 0px inset;

  --shadow-card:
    rgba(0,0,0,0.10) 0px 0px 0px 1px,
    rgba(0,0,0,0.10) 0px 2px 2px,
    rgba(0,0,0,0.10) 0px 4px 4px,
    rgba(0,0,0,0.10) 0px 8px 8px,
    rgba(255,255,255,0.03) 0px 1px 0px inset;

  --shadow-high:
    rgba(0,0,0,0.25) 0px 25px 50px -12px;

  --shadow-focus:
    0px 0px 0px 2px var(--color-focus-ring);

  /* ── Transition Defaults ────────────────────────────────── */

  --transition-micro:  all 200ms ease;
  --transition-macro:  all 300ms ease;

  /* ── Container ──────────────────────────────────────────── */
  --container-max:     1280px;
}

/* ── SofloPod compatibility aliases (legacy SofloPod token names → dark system) ── */
:root{
  --font-primary: var(--font-body);
  --color-primary:#FFFFFF; --color-on-primary:#000000;
  --color-brand-yellow:#36F4A4; --color-brand-yellow-deep:#36F4A4; --color-yellow-light:rgba(54,244,164,.12); --color-yellow-dark:#C1FBD4;
  --color-brand-blue:#C6FF00; --color-blue-450:#C6FF00; --color-blue-pressed:#A8DB00;
  --color-brand-coral:#52525B; --color-coral-light:#D4D4D8; --color-brand-teal:#C6FF00; --color-success-accent:#5C8A00;
  --color-canvas:#F7F7F4; --color-surface:#FFFFFF; --color-surface-soft:#F4F4F5; --color-surface-yellow:#EEF5DA;
  --color-hairline:#E4E4E7; --color-hairline-soft:#EDEDF0; --color-hairline-strong:#D4D4D8;
  --color-ink-deep:#0A0A0A; --color-ink:#0A0A0A; --color-charcoal:#27272A; --color-slate:#52525B; --color-steel:#71717A; --color-stone:#A1A1AA; --color-muted:#A1A1AA; --color-on-dark:#FFFFFF; --color-on-dark-muted:#A1A1AA; --color-footer-bg:#02090A;
  --color-text-link:#0A0A0A; --color-bg-page:#F7F7F4; --color-bg-subtle:#F4F4F5; --color-border-strong:#D4D4D8;
  --radius-full:9999px; --radius-xxl:12px; --radius-xxxl:12px; --radius-feature:20px;
  --shadow-1:var(--shadow-subtle); --shadow-2:var(--shadow-card); --shadow-3:var(--shadow-card); --shadow-4:var(--shadow-high);
  --pk:#36F4A4; --grn:#36F4A4; --sky:#9DABAD;
  --gp-pink:#C6FF00; --gp-green:#C6FF00; --gp-green-ink:#5C8A00; --gp-sky:#71717A; --gp-lime:#E9FFB0;
  --gp-grad:linear-gradient(90deg,#E9FFB0,#C6FF00); --gp-grad-text:linear-gradient(90deg,#0A0A0A,#5C8A00);
  --gp-glass:#FFFFFF; --gp-glass-border:#E4E4E7; --gp-glass-shadow:var(--shadow-card);
  --gp-them:#D4D4D8; --gp-track:#EDEDF0; --gp-ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font-body);font-size:16px;color:#0A0A0A;background:#F7F7F4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss03" 1}

/* ── Utility Classes ────────────────────────────────────── */

/* Typography */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-lh);
  font-feature-settings: var(--font-feature-ss03);
}

.display-light {
  font-family: var(--font-display);
  font-size: var(--type-display-light-size);
  font-weight: var(--type-display-light-weight);
  line-height: var(--type-display-light-lh);
  font-feature-settings: var(--font-feature-ss03);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  font-feature-settings: var(--font-feature-ss03);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  font-feature-settings: var(--font-feature-ss03);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  font-feature-settings: var(--font-feature-ss03);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
  font-feature-settings: var(--font-feature-ss03);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-lh);
  font-feature-settings: var(--font-feature-body);
}

.body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  font-feature-settings: var(--font-feature-body);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
}

.overline {
  font-family: var(--font-display);
  font-size: var(--type-overline-size);
  font-weight: var(--type-overline-weight);
  line-height: var(--type-overline-lh);
  letter-spacing: var(--type-overline-ls);
  text-transform: uppercase;
}

.label {
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
}

/* Color utilities */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-accent    { color: var(--color-accent); }
.bg-void        { background-color: var(--color-void); }
.bg-card        { background-color: var(--color-bg-card); }
.bg-section     { background-color: var(--color-bg-section); }
.bg-elevated    { background-color: var(--color-bg-elevated); }

/* Card */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-card-p);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-lh);
  padding: 12px 26px 12px 16px;
  cursor: pointer;
  transition: var(--transition-micro);
  border: 2px solid transparent;
  text-decoration: none;
  font-feature-settings: var(--font-feature-ss03);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-primary:hover {
  opacity: 0.88;
}

.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-black);
}