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

/* ----- TYPE: web font imports -----
   Inter = SF Pro fallback on non-Apple browsers; Geist = CurtainCall web;
   JetBrains Mono = code/mono fallback. SF Pro itself needs NO @font-face —
   it is the Apple system font, reached via -apple-system/BlinkMacSystemFont
   in the family stacks below, and renders natively on Apple devices. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&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 — CURTAINCALL (theater diary, amber/zinc) ============
     "Letterboxd for live theater" (curtaincall.fm). Poster-art-free by design
     (legal constraint) — a typographic diary aesthetic on zinc neutrals with a
     single amber/gold accent for star ratings + wishlist (the curtain/spotlight
     motif). Web: Tailwind zinc + Geist. iOS: native, .orange stars + system bg.
     Android: proposed Material 3 translation. */
  --cc-accent: #f59e0b;       /* amber-500 — stars, primary highlight, "gold" */
  --cc-accent-strong: #b45309;/* amber-700 — pressed / text-on-light */
  --cc-accent-soft: #fef3c7;  /* amber-100 — wishlist pill bg */
  --cc-ink: #18181b;          /* zinc-900 — primary button bg, headings */
  --cc-ink-2: #3f3f46;        /* zinc-700 */
  --cc-zinc-500: #71717a;     /* zinc-500 — secondary text */
  --cc-zinc-400: #a1a1aa;     /* zinc-400 — eyebrow labels, tertiary */
  --cc-zinc-200: #e4e4e7;     /* zinc-200 — borders (light) */
  --cc-zinc-50: #fafafa;      /* zinc-50 — page bg (light) */
  --cc-night: #0a0a0a;        /* near-black — page bg (dark) */
  --cc-night-2: #18181b;      /* zinc-900 — card bg (dark) */
  --cc-night-line: #27272a;   /* zinc-800 — borders (dark) */
  --cc-star: #f59e0b;         /* alias — ★ rating glyphs */
  --cc-wishlist: #d97706;     /* amber-600 — wishlist border/text */
  /* CurtainCall web type: Geist Sans + Geist Mono (Google Fonts).
     Substitution: Geist is on Google Fonts, loaded in --font-cc-* below. */

  /* ============ COLORS — ENCORE (setlist tracker, gold/night) ============
     "Encore Setlists" — a setlist.fm companion (chrischall/encore-ios). Open it
     at a show: it finds the venue from your location, who's playing tonight
     (Ticketmaster Discovery), and the artist's recent setlists (setlist.fm) as a
     tap-to-track checklist. The app icon sets the brand: a deep indigo-navy
     "dark venue" with a warm spotlight glow and a gold-ringed song checklist on
     cream bars. Stage GOLD is the brand accent; NIGHT indigo is the surface.
     Functional state colors stay system: played songs render system GREEN
     (`.green` in TrackerView), the encore label system ORANGE (`.orange`).
     Native iOS chassis — SF Pro, SF Symbols, grouped lists, no Liquid Glass
     custom surfaces (iOS 17+ baseline, zero deps). Best shown in dark mode. */
  --en-gold: #dda23e;        /* stage gold — accent, prominent CTAs, tab selection, progress */
  --en-gold-strong: #a8761f; /* pressed / gold text on cream (AA on light) */
  --en-gold-soft: #faf0d8;   /* soft gold highlight surface (light) */
  --en-spot: #f0c268;        /* brighter spotlight highlight (icon glow center) */
  --en-night: #15112b;       /* deep indigo-navy — app icon bg, dark base, marketing */
  --en-night-2: #211b40;     /* raised dark surface */
  --en-night-3: #2c2552;     /* card / grouped row bg on night */
  --en-night-line: #34305c;  /* hairline separator on night */
  --en-cream: #f2f0e2;       /* warm paper — the song bars in the icon */
  --en-played: #34c759;      /* alias → system green: a played/checked song */
  --en-encore: #ff9500;      /* alias → system orange: the "Encore N" label */

  /* ============ COLORS — ALLOTMINT ("Botanical Ledger", garden greens) ============
     AllotMint (nullnet-app/allotmint) — fair assignment of people to capacity-limited
     slots by ranked preference (students→events, staff→shifts, …). Web (Next.js) + iOS
     (SwiftUI) on one shared Kotlin engine. The signature is a LIVE, replayable draw:
     people animate into capacity "plots" that fill like garden beds. Aesthetic is
     "Botanical Ledger" — Allotment (garden plots) + Mint (the family): warm ledger
     PAPER, deep botanical GREEN ink, a single CLAY/coral accent, Fraunces serif display
     over a clean grotesque body, mono for seeds/ranks/numerals. This is the EVOLVED
     system: the app's own hexes kept as the light foundation, plus a net-new dark mode
     ("the greenhouse after dark"). Clay is the lone accent — the draw's live target,
     "traded-off" states, errors. Green carries structure; sprout-green fills the beds. */
  /* — Light (paper) — */
  --am-paper: #f6f1e7;        /* warm ledger paper — app bg */
  --am-paper-2: #efe7d6;      /* raised paper */
  --am-paper-line: #e3d8c1;   /* hairline / ruled grid */
  --am-ink: #1f2a24;          /* near-black green ink — primary text */
  --am-ink-soft: #4a574e;     /* secondary text */
  --am-ink-faint: #8a8674;    /* tertiary / eyebrow labels */
  --am-leaf: #2f5d44;         /* botanical green — primary buttons, structure */
  --am-leaf-deep: #1d3d2c;    /* deepest green — display headings, on-leaf shadow */
  --am-leaf-bright: #4a8a5f;  /* brighter green — links, active accents */
  --am-sprout: #8fbf7a;       /* young-sprout green — the soil/bed fill, rank pills */
  --am-clay: #c0603f;         /* clay/coral — THE accent: live target, traded-off, danger */
  --am-clay-soft: #d98a6a;    /* soft clay — glows, secondary accent */
  --am-gold: #c9a23f;         /* wheat gold — rare tertiary highlight */
  /* — Dark ("greenhouse after dark") — net-new in the redesign — */
  --am-d-bg: #14201a;         /* deep forest charcoal — dark app bg */
  --am-d-surface: #1b2a22;    /* raised dark surface / card */
  --am-d-surface-2: #223328;  /* higher surface / rows */
  --am-d-line: #33453a;       /* hairline on dark */
  --am-d-ink: #ece7d8;        /* warm paper text on dark */
  --am-d-ink-soft: #a9b3a4;   /* secondary on dark */
  --am-d-ink-faint: #6e7c6f;  /* tertiary on dark */
  --am-d-leaf: #4a8a5f;       /* green reads brighter on dark — buttons */
  --am-d-sprout: #9fd08a;     /* bed fill on dark */
  --am-d-clay: #d2734f;       /* accent on dark */

  /* ============ 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 is the Apple system font — reached via -apple-system /
     BlinkMacSystemFont (no font file needed, renders true SF Pro on Apple
     devices). Inter is the explicit fallback on non-Apple browsers. */
  --font-text: -apple-system, BlinkMacSystemFont, "Inter",
               system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter",
                  system-ui, sans-serif;
  --font-rounded: ui-rounded, -apple-system, "Inter",
                  system-ui, sans-serif; /* read-along; SF Pro Rounded via ui-rounded */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
               Consolas, monospace;
  /* CurtainCall web (Next.js) ships Geist; Roboto is the Android M3 default */
  --font-cc: "Geist", -apple-system, "Inter", system-ui, sans-serif;
  --font-cc-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --font-android: "Roboto", system-ui, sans-serif;
  /* AllotMint "Botanical Ledger": Fraunces serif display, Hanken Grotesk body,
     JetBrains Mono for seeds/ranks/numerals. iOS approximates with system serif/
     default/monospaced designs (see ui_kits/allotmint). */
  --font-am-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-am-body: "Hanken Grotesk", -apple-system, "Inter", system-ui, sans-serif;
  --font-am-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, 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); }