/* ============================================================
   Nullnet Design System — colors & type tokens
   Source: pdf-to-wallet (PassMint) + BedtimeStories Swift code
   Substitution: SF Pro → Inter on web (flag to user)
   ============================================================ */

/* ----- TYPE: Inter as SF Pro fallback on web ----- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============ COLORS — NULLNET UMBRELLA ============
     Near-black + paper neutrals. Used on marketing site,
     splash, terminal-style surfaces. Inspired by the
     StoryMint app icon (pure black, yellow star). */
  --nn-ink: #0b0b0f;          /* primary marketing background */
  --nn-ink-2: #16161c;        /* secondary surface on dark */
  --nn-ink-3: #20202a;        /* tertiary surface, borders on dark */
  --nn-paper: #fafafa;        /* primary light background */
  --nn-paper-2: #f1f1f3;      /* secondary light surface */
  --nn-line: rgba(0, 0, 0, 0.08);
  --nn-line-dark: rgba(255, 255, 255, 0.10);
  --nn-star: #f5c518;         /* the yellow star from the StoryMint icon */

  /* ============ COLORS — PASSMINT (utility, indigo) ============
     Periwinkle / system indigo. Hex 6366F1 is the literal
     `Color.indigo` fallback in DraftEditorView, and the icon BG. */
  --doc-accent: #6366f1;
  --doc-accent-soft: #eef2ff;
  --doc-accent-strong: #4f46e5;
  --doc-tint-glass: rgba(99, 102, 241, 0.18);
  --doc-icon-bg: #7b7bff;     /* the brighter periwinkle of AppIcon.png */

  /* ============ COLORS — STORYMINT (consumer, blue) ============
     System blue + warmer support. */
  --bt-accent: #3478f6;       /* iOS systemBlue */
  --bt-accent-soft: #e7f0ff;
  --bt-accent-strong: #1d63d8;
  --bt-violet: #8b5cf6;       /* purple gradient stop on auth */
  --bt-warm: #f5c518;         /* yellow — read-along current word, star */
  --bt-read: #34c759;         /* green — words already read (systemGreen) */
  --bt-difficult: #ff3b30;    /* red — difficult words / errors (systemRed) */
  --bt-moderate: #ff9500;     /* orange — moderate-difficulty / amazon (systemOrange) */

  /* ============ COLORS — SEMANTIC (light mode default) ============ */
  --fg-1: #0b0b0f;            /* primary text */
  --fg-2: rgba(11, 11, 15, 0.62); /* secondary text — matches SwiftUI .secondary */
  --fg-3: rgba(11, 11, 15, 0.42); /* tertiary text */
  --fg-on-accent: #ffffff;
  --bg-1: #ffffff;            /* primary surface */
  --bg-2: #f4f4f7;            /* grouped list background */
  --bg-3: #ebebef;            /* deeper grouped */
  --separator: rgba(60, 60, 67, 0.18);

  /* status (mirrors SwiftUI semantic system colors) */
  --status-red: #ff3b30;
  --status-orange: #ff9500;
  --status-yellow: #ffcc00;
  --status-green: #34c759;
  --status-blue: #007aff;
  --status-indigo: #5856d6;
  --status-purple: #af52de;

  /* ============ MATERIALS (Liquid Glass approximations) ============ */
  --glass-clear: rgba(255, 255, 255, 0.18);
  --glass-clear-border: rgba(255, 255, 255, 0.45);
  --glass-regular: rgba(255, 255, 255, 0.55);
  --glass-thick: rgba(255, 255, 255, 0.72);
  --glass-ultrathin: rgba(255, 255, 255, 0.32);
  --glass-blur: 24px;
  --glass-blur-thin: 14px;
  --glass-blur-thick: 36px;

  /* ============ SHADOW SYSTEM ============
     mirrors LiquidGlassExtensions.swift native* helpers */
  --shadow-nav: 0 1px 2px rgba(11, 11, 15, 0.05);
  --shadow-card: 0 2px 4px rgba(11, 11, 15, 0.10);
  --shadow-emph: 0 4px 8px rgba(11, 11, 15, 0.15);
  --shadow-pop:  0 8px 24px rgba(11, 11, 15, 0.18);

  /* ============ SPACING (Apple 4pt rhythm) ============ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;

  /* ============ RADII ============ */
  --r-sm: 6px;     /* word chips in read-along */
  --r-md: 8px;     /* small chips, role buttons */
  --r-lg: 12px;    /* default cards, list rows */
  --r-xl: 14px;    /* generated bundle rows */
  --r-2xl: 16px;   /* primary cards, emphasized */
  --r-pill: 999px; /* capsule */

  /* ============ TYPE — FAMILIES ============
     SF Pro on Apple platforms, Inter as web fallback */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                  system-ui, sans-serif;
  --font-rounded: ui-rounded, -apple-system, "SF Pro Rounded", "Inter",
                  system-ui, sans-serif; /* used in read-along */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
               Consolas, monospace;

  /* ============ TYPE SCALE — iOS Dynamic Type defaults @ Large ============
     name              : size / line-height / weight
     largeTitle        : 34 / 41 / 700
     title             : 28 / 34 / 600
     title2            : 22 / 28 / 600
     title3            : 20 / 25 / 500
     headline          : 17 / 22 / 600
     body              : 17 / 22 / 400
     callout           : 16 / 21 / 400
     subheadline       : 15 / 20 / 400
     footnote          : 13 / 18 / 400
     caption           : 12 / 16 / 400
     caption2          : 11 / 13 / 400
  */
  --t-large-title: 34px;       --lh-large-title: 41px;
  --t-title:       28px;       --lh-title:       34px;
  --t-title2:      22px;       --lh-title2:      28px;
  --t-title3:      20px;       --lh-title3:      25px;
  --t-headline:    17px;       --lh-headline:    22px;
  --t-body:        17px;       --lh-body:        22px;
  --t-callout:     16px;       --lh-callout:     21px;
  --t-subhead:     15px;       --lh-subhead:     20px;
  --t-footnote:    13px;       --lh-footnote:    18px;
  --t-caption:     12px;       --lh-caption:     16px;
  --t-caption2:    11px;       --lh-caption2:    13px;

  /* tracking — SF Pro Display tightens slightly above 20px */
  --tracking-display: -0.022em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.08em;
}

/* dark mode mirror */
@media (prefers-color-scheme: dark) {
  :root {
    --fg-1: #f5f5f7;
    --fg-2: rgba(245, 245, 247, 0.62);
    --fg-3: rgba(245, 245, 247, 0.40);
    --bg-1: #000000;
    --bg-2: #1c1c1e;
    --bg-3: #2c2c2e;
    --separator: rgba(84, 84, 88, 0.65);
    --glass-clear: rgba(20, 20, 25, 0.32);
    --glass-clear-border: rgba(255, 255, 255, 0.18);
    --glass-regular: rgba(28, 28, 32, 0.62);
    --glass-thick: rgba(28, 28, 32, 0.78);
    --glass-ultrathin: rgba(28, 28, 32, 0.42);
    --shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-emph: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-pop:  0 8px 24px rgba(0, 0, 0, 0.7);
  }
}

/* ============ SEMANTIC TYPE STYLES ============ */
.t-large-title {
  font-family: var(--font-display);
  font-size: var(--t-large-title);
  line-height: var(--lh-large-title);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-title2 {
  font-family: var(--font-display);
  font-size: var(--t-title2);
  line-height: var(--lh-title2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-title3 {
  font-family: var(--font-display);
  font-size: var(--t-title3);
  line-height: var(--lh-title3);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-headline {
  font-family: var(--font-text);
  font-size: var(--t-headline);
  line-height: var(--lh-headline);
  font-weight: 600;
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg-1);
}
.t-callout {
  font-family: var(--font-text);
  font-size: var(--t-callout);
  line-height: var(--lh-callout);
  font-weight: 400;
  color: var(--fg-1);
}
.t-subhead {
  font-family: var(--font-text);
  font-size: var(--t-subhead);
  line-height: var(--lh-subhead);
  font-weight: 400;
  color: var(--fg-2);
}
.t-footnote {
  font-family: var(--font-text);
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  font-weight: 400;
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  color: var(--fg-2);
}
.t-caption2 {
  font-family: var(--font-text);
  font-size: var(--t-caption2);
  line-height: var(--lh-caption2);
  font-weight: 500;
  color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--fg-1);
}
.t-rounded {
  font-family: var(--font-rounded);
  font-weight: 500;
  letter-spacing: 0;
}

/* element-level defaults so plain HTML matches the system */
html, body { font-family: var(--font-text); color: var(--fg-1); background: var(--bg-1); }
h1 { @extend .t-large-title; }
h2 { @extend .t-title; }
h3 { @extend .t-title2; }
h4 { @extend .t-title3; }
h5, h6 { @extend .t-headline; }
p { @extend .t-body; }
small { @extend .t-caption; }
code, pre, kbd { font-family: var(--font-mono); }