/* ============================================================
   Dynawins Design Tokens
   Single source of truth for color, type, spacing, radii, shadows.
   ============================================================ */

/* ---- FONTS (Google Fonts substitutes - flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — INK (text) & SURFACE (backgrounds)
     ============================================================ */
  --ink-1:        #0A0A0A;   /* primary text, headlines */
  --ink-2:        #262626;   /* sub-headlines */
  --ink-3:        #525252;   /* body secondary */
  --ink-4:        #737373;   /* meta, captions */
  --ink-5:        #A3A3A3;   /* placeholders, tertiary */
  --ink-6:        #D4D4D4;   /* disabled text */

  --surface-1:    #FFFFFF;   /* primary canvas */
  --surface-2:    #F2F1ED;   /* alternating sections (more visible vs surface-1) */
  --surface-3:    #EAE8E3;   /* code plates, inset wells */
  --surface-4:    #DFDDD7;   /* hover state on surface-3 */
  --surface-ink:  #0A0A0A;   /* footer / dark inversions */

  --border:       #E5E5E5;   /* hairline */
  --border-strong:#0A0A0A;   /* outline buttons, focus accents */

  /* ============================================================
     COLOR — BRAND ACCENT
     Two variants. Default is `bold` (Dynawins Indigo).
     Toggle by adding [data-accent="safe"] to root.
     ============================================================ */
  --accent:       #4F46E5;   /* Indigo 600 */
  --accent-hover: #4338CA;
  --accent-press: #3730A3;
  --accent-tint:  #EEF2FF;   /* selection bg, badge bg */
  --accent-fg:    #FFFFFF;   /* text on accent */

  [data-accent="safe"] & ,
  &[data-accent="safe"] {
    --accent:       #0F6CBD;
    --accent-hover: #0A5BA0;
    --accent-press: #084987;
    --accent-tint:  #E8F1FB;
  }

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --success:      #15803D;
  --success-tint: #DCFCE7;
  --warning:      #A16207;
  --warning-tint: #FEF3C7;
  --danger:       #B91C1C;
  --danger-tint:  #FEE2E2;
  --info:         var(--accent);
  --info-tint:    var(--accent-tint);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.25 modular ratio, anchored at 16px. */
  --fs-micro:   12px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h4:      20px;
  --fs-h3:      24px;
  --fs-h2:      36px;
  --fs-h1:      56px;
  --fs-display: 72px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-tight:   1.3;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:    0;
  --tracking-mono:    0;
  --tracking-caps:    0.08em;

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

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;
  --space-10: 128px;

  --container:  1200px;
  --reading:     680px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-0:    0;
  --radius-1:    4px;
  --radius-2:    8px;
  --radius-3:   12px;
  --radius-4:   16px;
  --radius-pill:999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --shadow-md: 0 4px 12px rgba(10,10,10,0.06), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lg: 0 16px 40px rgba(10,10,10,0.08), 0 4px 12px rgba(10,10,10,0.05);
  --shadow-focus: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --header-h:   64px;
  --fab-size:   56px;
  --z-header:   50;
  --z-modal:   100;
  --z-fab:      40;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use directly on elements: <h1 class="h1">...</h1>
   ============================================================ */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-bold);
  color: var(--ink-1);
}
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-bold);
  color: var(--ink-1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
}
.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
}
.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.p, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
  color: var(--ink-4);
}
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.code, code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 1px 6px;
  color: var(--ink-1);
}