/* ============================================================
   HARBORCREW — Design Tokens
   harborcrew.ai · Your all-in-one crew. "Consider it handled."
   ------------------------------------------------------------
   Suite: "Concrete & Beacon" — concrete greys, harbor navy ink,
   a single beacon-amber accent. Type: IBM Plex Sans + IBM Plex
   Mono (all sans). Nautical: chart-grid ground, signal-flag
   motif, rivets, Lucide nautical icons. Full light + dark.
   ============================================================ */

/* ---- Fonts — fully self-hosted (OFL). url() resolves relative to THIS file (project root). ----
   Display + UI : IBM Plex Sans  (variable: weight 100–700 + width axis)
   Mono / data  : IBM Plex Mono  (static, 4 weights 400–700, below) */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-stretch:75% 100%; font-display:swap; src:url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations'); }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:100 700; font-stretch:75% 100%; font-display:swap; src:url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'); }

/* IBM Plex Mono — self-hosted (OFL). url() resolves relative to THIS file (project root).
   Trimmed to the 4 weights the system actually uses (data, labels, logs); no italics. */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); }

/* ============================================================
   1. PRIMITIVES  (raw values — do not reference directly in UI)
   ============================================================ */
:root {
  /* Concrete — cool pier-grey neutral ramp */
  --concrete-50:  #F4F3F0;
  --concrete-100: #E6E5E1;
  --concrete-200: #D9D7D1;
  --concrete-300: #C7C5BD;
  --concrete-400: #A9ABA9;
  --steel-500:    #8A929A;   /* steel grey-blue */
  --steel-600:    #646B72;
  --slate-700:    #474E56;

  /* Harbor navy — the ink + deep surfaces */
  --navy-800:  #2A3543;
  --navy-900:  #1E2A38;   /* core ink */
  --navy-950:  #141A22;
  --navy-deepest: #0E141B;

  /* Beacon — the signature amber accent */
  --beacon-200: #F6E7C6;
  --beacon-300: #ECCE8E;
  --beacon-400: #E0A93C;
  --beacon-500: #D2901F;   /* core (light) */
  --beacon-600: #A8731A;   /* deep / press */
  --beacon-700: #855912;

  /* Supporting harbor hues — for status, used sparingly */
  --teal-500:  #2E8B6F;   /* sea green / success */
  --teal-600:  #246F58;
  --rust-500:  #BC4B2E;   /* corten rust / danger */
  --rust-600:  #9C3D24;
  --signal-500:#45708F;   /* steel blue / info */
  --signal-600:#375972;
}

/* ============================================================
   2. SEMANTIC TOKENS — LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:          var(--concrete-100);   /* app / page background */
  --surface:     var(--concrete-50);    /* cards, panels */
  --surface-2:   #FBFAF8;               /* subtle raised */
  --surface-3:   var(--concrete-200);   /* hover wells, fills */
  --overlay:     rgba(20, 26, 34, 0.42);

  /* Text */
  --fg:          var(--navy-900);
  --fg-2:        var(--steel-600);
  --fg-3:        #7C828A;
  --fg-on-accent:var(--beacon-ink, #221A06);
  --fg-on-ink:   var(--concrete-50);    /* text on navy buttons */

  /* Lines */
  --line:        var(--concrete-200);
  --line-strong: var(--concrete-300);
  --line-soft:   #EAE8E3;

  /* Brand / accent (beacon) */
  --accent:        var(--beacon-500);
  --accent-hover:  var(--beacon-600);
  --accent-press:  var(--beacon-700);
  --accent-soft:   var(--beacon-200);
  --accent-ring:   rgba(210, 144, 31, 0.32);
  --beacon-ink:    #221A06;

  /* Primary action = harbor navy (premium, instrument-grade) */
  --primary:       var(--navy-900);
  --primary-hover: var(--navy-800);
  --primary-press: var(--navy-950);

  /* Steel = secondary structural color */
  --steel:         var(--steel-500);

  /* Status */
  --success:  var(--teal-500);
  --success-soft: #D9EBE4;
  --warning:  var(--beacon-600);
  --warning-soft: var(--beacon-200);
  --danger:   var(--rust-500);
  --danger-soft: #F4DED7;
  --info:     var(--signal-500);
  --info-soft: #DEE8EE;

  /* Nautical ground — faint chart grid */
  --chart-grid: rgba(30, 42, 56, 0.05);
  --chart-grid-size: 32px;

  /* Elevation — cool navy-tinted, crisp */
  --shadow-xs: 0 1px 2px rgba(20, 26, 34, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(20, 26, 34, 0.10);
  --shadow-md: 0 10px 26px -10px rgba(20, 26, 34, 0.18);
  --shadow-lg: 0 24px 56px -18px rgba(20, 26, 34, 0.26);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
}

/* ============================================================
   3. SEMANTIC TOKENS — DARK
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #181C20;
  --surface:     #21272D;
  --surface-2:   #1C2228;
  --surface-3:   #2C343B;
  --overlay:     rgba(0, 0, 0, 0.6);

  --fg:          #E8EAEC;
  --fg-2:        #A7AEB5;
  --fg-3:        #79818A;
  --fg-on-accent:#181C20;
  --fg-on-ink:   #181C20;

  --line:        #313840;
  --line-strong: #3D454E;
  --line-soft:   #262C32;

  --accent:        var(--beacon-400);   /* #E0A93C — brighter on dark */
  --accent-hover:  var(--beacon-300);
  --accent-press:  var(--beacon-200);
  --accent-soft:   #2A2716;
  --accent-ring:   rgba(224, 169, 60, 0.34);
  --beacon-ink:    #181C20;

  /* In dark mode primary = beacon (navy would vanish on dark) */
  --primary:       var(--beacon-400);
  --primary-hover: var(--beacon-300);
  --primary-press: var(--beacon-200);

  --steel:         var(--steel-500);

  --success:  #57B394;
  --success-soft: #16271F;
  --warning:  var(--beacon-300);
  --warning-soft: #2A2716;
  --danger:   #D9694B;
  --danger-soft: #2C1813;
  --info:     #74A0BE;
  --info-soft: #16242E;

  --chart-grid: rgba(231, 178, 60, 0.045);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 28px 64px -20px rgba(0, 0, 0, 0.72);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
}

/* Respect OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#181C20; --surface:#21272D; --surface-2:#1C2228; --surface-3:#2C343B;
    --overlay:rgba(0,0,0,.6);
    --fg:#E8EAEC; --fg-2:#A7AEB5; --fg-3:#79818A; --fg-on-ink:#181C20; --fg-on-accent:#181C20;
    --line:#313840; --line-strong:#3D454E; --line-soft:#262C32;
    --accent:#E0A93C; --accent-hover:#ECCE8E; --accent-press:#F6E7C6;
    --accent-soft:#2A2716; --accent-ring:rgba(224,169,60,.34); --beacon-ink:#181C20;
    --primary:#E0A93C; --primary-hover:#ECCE8E; --primary-press:#F6E7C6;
    --success:#57B394; --success-soft:#16271F; --warning:#ECCE8E; --warning-soft:#2A2716;
    --danger:#D9694B; --danger-soft:#2C1813; --info:#74A0BE; --info-soft:#16242E;
    --chart-grid:rgba(231,178,60,.045);
    --shadow-xs:0 1px 2px rgba(0,0,0,.45); --shadow-sm:0 2px 8px -1px rgba(0,0,0,.55);
    --shadow-md:0 12px 30px -12px rgba(0,0,0,.65); --shadow-lg:0 28px 64px -20px rgba(0,0,0,.72);
  }
}

/* ============================================================
   4. TYPOGRAPHY — IBM Plex (all sans)
   ============================================================ */
:root {
  /* Names kept as --font-display / --font-sans / --font-mono so all
     downstream kits inherit. Display & UI are the same family here. */
  --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (tuned for Plex Sans display) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.375rem;  /* 38 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.75rem;   /* 76 */

  --leading-tight: 1.04;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.62;

  /* Plex display wants tight tracking; mono/labels open up */
  --tracking-tightest: -0.035em;
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.012em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.1em;   /* mono eyebrow labels */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
}

/* ============================================================
   5. SPACING, RADII, MOTION
   ============================================================ */
:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 112px;

  /* Tighter, more instrument-grade than rounded-friendly */
  --r-xs:  4px;
  --r-sm:  7px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --container: 1200px;
  --container-prose: 720px;

  /* Motion — gentle, precise, never bouncy. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   6. NAUTICAL UTILITIES
   ============================================================ */
/* Faint sea-chart grid ground. Apply to a section/page. */
.chart-ground {
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: var(--chart-grid-size) var(--chart-grid-size);
}
/* Signal-flag strip — a small run of maritime signal flags.
   Use as a brand accent (header rule, footer cap). 4 default flags. */
.signal-flags { display: inline-flex; gap: 3px; }
.signal-flags i { width: 18px; height: 13px; border-radius: 2px; display: block; }
.flag-navy   { background: var(--navy-900); }
.flag-beacon { background: var(--beacon-500); }
.flag-rust   { background: var(--rust-500); }
.flag-teal   { background: var(--teal-500); }
.flag-steel  { background: var(--steel-500); }
.flag-cream  { background: var(--concrete-50); border: 1px solid var(--line-strong); }

/* ============================================================
   7. SEMANTIC ELEMENT HELPERS (opt-in classes)
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); line-height: 1.04; letter-spacing: var(--tracking-tight); color: var(--fg); }
.ds-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.15; letter-spacing: var(--tracking-snug); color: var(--fg); }
.ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);  line-height: 1.3;  letter-spacing: var(--tracking-snug); color: var(--fg); }
.ds-lead { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--fg-2); }
.ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); }
.ds-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); }
.ds-eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-press);
}
.ds-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; color: var(--fg-2); }
.ds-quote { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.3; letter-spacing: var(--tracking-snug); color: var(--fg); }