/* STAKD design tokens — generated for mystakd.com.
   Concatenated from the design system so the live site has no _ds/ dependency.
   Do not hand-edit: regenerate from the design system when tokens change. */

/* ---------- fonts.css ---------- */
/* STAKD webfonts — the three brand families, loaded from Google Fonts.
   Saira Condensed = display / wordmark / big numbers.
   Space Grotesk   = body / UI / everything that carries meaning.
   JetBrains Mono  = labels / data / eyebrows / timestamps (ALL CAPS, tracked).
   NOTE: substituted from Google Fonts CDN — the app ships these exact families
   via @expo-google-fonts, so the webfont sources match 1:1. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700;1,800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- colors.css ---------- */
/* =============================================================================
   STAKD Color — "Dark Luxury" (Amex Black). The stage is always near-black;
   teal is the everyday brand accent; gold is sacred (milestones only); green/red
   are strictly money in/out. Mirrors src/constants/theme.ts (dsdark + Lux + Ascent).
   ============================================================================= */
:root {
  /* --- Stage & surfaces (the machined dark panels) ------------------------ */
  --stakd-ink: #0A0C0E;            /* deepest studio background */
  --stakd-ink-deep: #070809;       /* hero card bottom / near-ink */
  --stakd-bg-lift: #13171A;        /* subtle top lighting */
  --stakd-surface: #101518;
  --stakd-surface-elevated: #171C1F;
  --stakd-card: #141A1C;
  --stakd-card-hi: #191D21;        /* panel top (gradient) */
  --stakd-card-lo: #0F1316;        /* panel bottom (gradient) */
  --stakd-hero-hi: #161A1E;
  --stakd-hero-lo: #070809;

  /* --- Brand teal ramp (the Ascent trio) --------------------------------- */
  --stakd-teal: #16D6C5;           /* primary — brand, active, CTA, STAKD% */
  --stakd-teal-mid: #0FAE9F;
  --stakd-teal-deep: #0A7D72;
  --stakd-teal-link: #0C7A6E;      /* teal on light (links on paper) */
  --stakd-teal-dim: rgba(22,214,197,0.12);
  --stakd-teal-glow: rgba(22,214,197,0.22);
  --stakd-teal-border: rgba(22,214,197,0.35);

  /* --- Semantic money & accents ------------------------------------------ */
  --stakd-green: #3FCF8E;          /* money in / built / kept */
  --stakd-green-dim: rgba(63,207,142,0.12);
  --stakd-red: #F0676B;            /* money out / cuts */
  --stakd-red-dim: rgba(240,103,107,0.10);
  --stakd-red-border: rgba(240,103,107,0.30);
  --stakd-gold: #E8C572;           /* SACRED — milestones & Top Venture only */
  --stakd-gold-dim: rgba(232,197,114,0.14);
  --stakd-gold-border: rgba(232,197,114,0.40);
  --stakd-purple: #9A8BE0;
  --stakd-blue: #5BA8D8;

  /* --- Ink / text (off-white on the dark stage) -------------------------- */
  --stakd-paper: #F3F4F1;          /* paper / highest-emphasis ink */
  --stakd-text-primary: #F3F4F1;
  --stakd-text-secondary: rgba(243,244,241,0.66);
  --stakd-text-muted: rgba(243,244,241,0.46);
  --stakd-text-faint: rgba(243,244,241,0.40);

  /* --- Hairlines, tracks, overlays --------------------------------------- */
  --stakd-border: rgba(255,255,255,0.08);
  --stakd-border-soft: rgba(255,255,255,0.06);
  --stakd-track: rgba(255,255,255,0.10);
  --stakd-overlay: rgba(0,0,0,0.72);

  /* --- Per-stream jewel tones (Venture accents that read on the stage) --- */
  --stakd-stream-1: #3FCF8E;
  --stakd-stream-2: #9A8BE0;
  --stakd-stream-3: #E8C572;
  --stakd-stream-4: #F0676B;
  --stakd-stream-5: #5BA8D8;
  --stakd-stream-6: #E0883C;
  --stakd-stream-7: #16D6C5;
  --stakd-stream-8: #C77DD0;

  /* --- Semantic aliases (prefer these in new work) ----------------------- */
  --stakd-bg: var(--stakd-ink);
  --stakd-primary: var(--stakd-teal);
  --stakd-success: var(--stakd-green);
  --stakd-error: var(--stakd-red);
  --stakd-warning: var(--stakd-gold);
}

/* ---------- typography.css ---------- */
/* =============================================================================
   STAKD Typography — three families, tight display, tracked mono labels.
   Saira Condensed carries display + big numbers; Space Grotesk carries body;
   JetBrains Mono carries ALL-CAPS tracked labels/data. Mirrors theme.Typography.
   ============================================================================= */
:root {
  /* --- Families ---------------------------------------------------------- */
  --stakd-font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;  /* headlines, wordmark, big numbers */
  --stakd-font-body: 'Space Grotesk', system-ui, sans-serif;            /* body, UI */
  --stakd-font-mono: 'JetBrains Mono', ui-monospace, monospace;         /* labels, data, eyebrows */

  /* --- Weights ----------------------------------------------------------- */
  --stakd-weight-regular: 400;
  --stakd-weight-medium: 500;
  --stakd-weight-semibold: 600;
  --stakd-weight-bold: 700;
  --stakd-weight-black: 800;

  /* --- Type scale (px, from theme.Typography) ---------------------------- */
  --stakd-size-hero: 52px;     /* Saira 800, -1 tracking */
  --stakd-size-h1: 32px;       /* Saira 700, -0.5 */
  --stakd-size-h2: 26px;       /* Saira 800 */
  --stakd-size-h3: 18px;       /* 600 */
  --stakd-size-body: 15px;     /* 400 */
  --stakd-size-caption: 12px;  /* 400 */
  --stakd-size-label: 10px;    /* mono 600, +1.2 tracking, ALL CAPS */

  /* --- Tracking ---------------------------------------------------------- */
  --stakd-track-display: -1px;   /* condensed display leans tight */
  --stakd-track-tight: -0.5px;
  --stakd-track-label: 1.2px;    /* mono eyebrow tracking (goes up to 5px on share cards) */
  --stakd-track-wordmark: 1.5px;
}

/* ---------- spacing.css ---------- */
/* =============================================================================
   STAKD Spacing, radii & layout — from theme.Spacing / theme.Radius.
   ============================================================================= */
:root {
  /* --- Spacing scale ----------------------------------------------------- */
  --stakd-space-xs: 4px;
  --stakd-space-sm: 8px;
  --stakd-space-md: 16px;
  --stakd-space-lg: 24px;
  --stakd-space-xl: 32px;
  --stakd-space-xxl: 48px;

  /* --- Corner radii ------------------------------------------------------ */
  --stakd-radius-sm: 8px;
  --stakd-radius-md: 12px;
  --stakd-radius-lg: 16px;    /* the default card radius */
  --stakd-radius-xl: 24px;
  --stakd-radius-button: 16px;/* rounded-rect button, not a pill */
  --stakd-radius-full: 9999px;

  /* --- Layout ------------------------------------------------------------ */
  --stakd-screen-padding: 20px; /* mobile screen gutter */
}

/* ---------- effects.css ---------- */
/* =============================================================================
   STAKD Effects — machined edges, teal brand lift, glows, gradients.
   The look: matte near-black panels with a single bright hairline at the top
   edge (top-lit machined metal), teal-shadowed primary buttons, sacred glows.
   ============================================================================= */
:root {
  /* --- Gradients --------------------------------------------------------- */
  --stakd-gradient-cta: linear-gradient(135deg, #17C9B8 0%, #0A7368 100%); /* @kind color */
  --stakd-gradient-teal: linear-gradient(135deg, #16D6C5 0%, #0FAE9F 55%, #0A7D72 100%); /* @kind color */
  --stakd-gradient-panel: linear-gradient(180deg, var(--stakd-card-hi) 0%, var(--stakd-card-lo) 100%);
  --stakd-gradient-hero: linear-gradient(180deg, var(--stakd-hero-hi) 0%, var(--stakd-hero-lo) 100%);
  --stakd-gradient-stage: radial-gradient(120% 70% at 50% 0%, #0d1614 0%, #070b0b 60%); /* @kind color */

  /* --- Shadows / lift ---------------------------------------------------- */
  --stakd-shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.45);
  --stakd-shadow-panel: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(0,0,0,0.5);
  --stakd-lift-teal: 0 6px 18px rgba(10,125,114,0.45);   /* primary CTA brand lift */
  --stakd-glow-teal: 0 0 24px rgba(22,214,197,0.35);     /* active / ring glow */
  --stakd-glow-gold: 0 0 24px rgba(232,197,114,0.30);    /* milestone glow (sacred) */

  /* --- The machined top hairline (paint on a panel's ::before) ----------- */
  --stakd-hairline: rgba(255,255,255,0.08);

  /* --- Motion — machined, never bouncy: float & settle, 0.6–1s eases ----- */
  --stakd-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --stakd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --stakd-dur-quick: 0.2s; /* @kind other */
  --stakd-dur-settle: 0.6s; /* @kind other */
  --stakd-dur-cinematic: 1s; /* @kind other */
}