/* ============================================================
 * BLACK FLAG DESIGN — DESIGN TOKENS
 * Ported from bfd-style-guide/src/styles/global.css (Tailwind v4 @theme)
 * 
 * Philosophy: monochromatic base (Obsidian / Cloud Dancer — never
 * pure black, never pure white), one bold accent. The "crew" palette
 * is reserved for state colors, not decoration. When designing for a
 * client, swap one crew color for that client's primary.
 * ============================================================ */

/* Fonts — brand files in ./fonts/
 * Full Montserrat family: 100 → 900, roman + italic. */
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Thin.ttf") format("truetype");            font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ThinItalic.ttf") format("truetype");      font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype");      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLightItalic.ttf") format("truetype");font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Light.ttf") format("truetype");           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-LightItalic.ttf") format("truetype");     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Italic.ttf") format("truetype");          font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.ttf") format("truetype");          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype");    font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.ttf") format("truetype");            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BoldItalic.ttf") format("truetype");      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Black.ttf") format("truetype");           font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BlackItalic.ttf") format("truetype");     font-weight: 900; font-style: italic; font-display: swap; }

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── TYPE FAMILIES ───────────────────────────────────────── */
  --font-sans:    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  --font-heading: var(--font-sans);

  /* ─── BASE PALETTE — "THE SHIP" (60%) ─────────────────────
   * Cool zinc grays. Sharp, engineered, zero warmth.
   * Obsidian + Cloud Dancer — never #000 / never #FFF.
   * ──────────────────────────────────────────────────────── */
  --bf-bg:       #F4F4F5;  /* Zinc 100 — "The Harbor" — primary canvas */
  --bf-surface:  #E4E4E7;  /* Zinc 200 — "The Hull" — recessed panels, sidebars */
  --bf-paper:    #FAFAFA;  /* Zinc 50  — "The Chart" — Cloud Dancer, elevated */
  --bf-text:     #171717;  /* Ink      — "The Flag" — Obsidian, primary text */
  --bf-muted:    #71717A;  /* Zinc 500 — "The Helm" — secondary text */
  --bf-border:   #D4D4D8;  /* Zinc 300 — "The Rigging" — dividers */

  --bf-alt-bg:      #FFFFFF;  /* section alternation */
  --bf-alt-surface: #F4F4F5;
  --bf-alt-border:  #E4E4E7;

  /* ─── ACCENT — "THE OFFICERS" (15%) ──────────────────────
   * Brand identity. The flag itself. */
  --bf-accent:       #18181B;
  --bf-button:       #171717;
  --bf-button-text:  #FAFAFA;

  /* ─── CREW STATES (25%) ──────────────────────────────────
   * Bold, grungy, unapologetic. Each has a job.
   * Use ONE of these as the client-accent when designing for
   * a client — swap in their brand primary instead.
   * ──────────────────────────────────────────────────────── */
  --bf-gold:    #FFC800;  /* "The Lookout"   — warn, attention */
  --bf-mint:    #5AE09A;  /* "The Medic"     — success, online */
  --bf-royal:   #7B3EC4;  /* "The Navigator" — highlight, premium */
  --bf-crimson: #E04848;  /* "The Cannon"    — error, destructive */
  --bf-cobalt:  #3B6CE7;  /* "The Compass"   — info, links */
  --bf-amber:   #E89020;  /* "The Forge"     — pending, in-progress */
  --bf-teal:    #2BB5A0;  /* "The Tide"      — active, connected */
  --bf-rose:    #D94F8C;  /* "The Signal"    — notifications */
  --bf-slate:   #64748B;  /* "The Anchor"    — archived, disabled */

  /* Legacy aliases still used by original components */
  --bf-note-warning:   var(--bf-gold);
  --bf-note-success:   var(--bf-mint);
  --bf-note-highlight: var(--bf-royal);
  --bf-destructive:    var(--bf-crimson);

  /* ─── CLIENT-ACCENT HOOK ─────────────────────────────────
   * When designing client assets, override this to the client's
   * primary brand color. Components that use --bf-accent-client
   * will pick it up. Default is BFD's own crew gold. */
  --bf-accent-client: var(--bf-gold);

  /* ─── SEMANTIC TYPE TOKENS ───────────────────────────────
   * Size + weight + leading + tracking as single vars, so
   * components can compose instead of duplicating rules.
   * ──────────────────────────────────────────────────────── */
  /* Display — hero only, clamp for responsive */
  --type-display-size:   clamp(2.75rem, 8vw, 7rem);
  --type-display-weight: 700;
  --type-display-lh:     1.08;
  --type-display-track:  -0.02em;

  --type-h1-size: 2.5rem;   --type-h1-weight: 700; --type-h1-lh: 1.1;  --type-h1-track: -0.02em;
  --type-h2-size: 1.75rem;  --type-h2-weight: 700; --type-h2-lh: 1.2;  --type-h2-track: -0.01em;
  --type-h3-size: 1.375rem; --type-h3-weight: 600; --type-h3-lh: 1.3;  --type-h3-track: -0.01em;
  --type-h4-size: 1.125rem; --type-h4-weight: 500; --type-h4-lh: 1.35; --type-h4-track: 0;

  --type-body-size: 1rem;     --type-body-weight: 400; --type-body-lh: 1.7;
  --type-small-size: 0.875rem;--type-small-weight: 400;--type-small-lh: 1.6;
  --type-mono-size: 0.8125rem;--type-mono-weight: 400;--type-mono-lh: 1.6;

  /* Caption / eyebrow — always uppercase + wide tracking */
  --type-caption-size: 0.6875rem;
  --type-caption-weight: 500;
  --type-caption-track: 0.2em;

  /* ─── SPACING + RADII + SHADOWS ──────────────────────────
   * Thin, hard-edged. No soft blurs — shadows are structural.
   * "shadow-comic" is a signature: a hard 4px offset for the
   * brand's sticky-note / bold-claim motif. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm:         0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:         0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-card:       0 4px 24px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.10);
  --shadow-float:      0 20px 60px rgba(0,0,0,0.08);
  --shadow-comic:      4px 4px 0px 0px rgba(0,0,0,0.95);
  --shadow-comic-sm:   2px 2px 0px 0px rgba(0,0,0,0.95);

  /* ─── MOTION ────────────────────────────────────────────
   * Primary easing is [0.16, 1, 0.3, 1] — fast-out, smooth-in.
   * Interaction: 0.2s. Entrance: 0.8s. Stagger: 0.1s/child. */
  --ease-brand:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-transform:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-interaction: 0.2s;
  --dur-transform:   0.3s;
  --dur-entrance:    0.8s;
}

/* ============================================================
 * BASE ELEMENTS
 * ============================================================ */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-weight);
  color: var(--bf-text);
  background-color: var(--bf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--bf-text);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-track); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-track); }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-track); }
h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: var(--type-h4-weight); }

p  { font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: var(--type-body-weight); margin: 0; }
small { font-size: var(--type-small-size); line-height: var(--type-small-lh); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

::selection { background-color: rgba(24, 27, 32, 0.2); }

/* ============================================================
 * UTILITY CLASSES
 * Composable atoms for prototypes + slides.
 * ============================================================ */
.text-display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-track);
}

.text-caption, .eyebrow {
  font-size: var(--type-caption-size);
  line-height: 1;
  font-weight: var(--type-caption-weight);
  text-transform: uppercase;
  letter-spacing: var(--type-caption-track);
  color: var(--bf-muted);
}

.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

.shadow-comic    { box-shadow: var(--shadow-comic); }
.shadow-comic-sm { box-shadow: var(--shadow-comic-sm); }

/* Signature sticky-note — used for bold claims + announcements.
 * A rotation and 4px hard shadow are the identifying marks. */
.bf-sticky-note {
  background: var(--bf-gold);
  color: var(--bf-text);
  border: 3px solid var(--bf-text);
  box-shadow: var(--shadow-comic);
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  transition: transform var(--dur-transform) var(--ease-brand);
}
.bf-sticky-note:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.95); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}