/* =========================================================
   BespokeOS.AI — Design Tokens (v2)
   Light-default + brand-teal-led + dark accent panels.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ============ Core brand ============ */
  --color-brand-teal:        #1A9B9B;   /* primary brand color (matches logo) */
  --color-brand-teal-deep:   #137070;   /* hover / pressed teal */
  --color-brand-teal-bright: #22B8B8;   /* on-dark legibility step */
  --color-brand-teal-soft:   #E6F1F1;   /* tinted background */

  /* ============ Light surfaces (default) ============ */
  --color-cream:        #F5EFE3;   /* primary canvas — warm cream */
  --color-cream-deep:   #ECE3D2;   /* alternate band, slight depth */
  --color-paper:        #FFFFFF;   /* card surface */
  --color-off-white:    #FAF7F0;   /* subtle off-white panel */

  /* ============ Dark surfaces (accent panels) ============ */
  --color-obsidian:     #0E1A1F;   /* dark accent panel — slight teal undertone */
  --color-deep-navy:    #081317;   /* deepest */
  --color-graphite:     #15252A;   /* dark card */
  --color-slate:        #1F3940;   /* depth step */
  --color-panel-border: #28464E;   /* border on dark */

  /* ============ Blueprint surfaces ============ */
  --color-blueprint:        #0E2E3A;   /* signature blueprint navy */
  --color-blueprint-deep:   #0A2530;   /* deepest blueprint */
  --color-blueprint-line:   rgba(230,241,241,0.12);
  --color-blueprint-line-strong: rgba(230,241,241,0.45);
  --color-blueprint-ink:    #E6F1F1;   /* primary text on blueprint */
  --color-blueprint-ink-mute: rgba(230,241,241,0.65);

  /* ============ Ink / text ============ */
  --color-ink:          #0E1A1F;   /* primary text on light */
  --color-ink-muted:    #4F6068;   /* muted text on light */
  --color-ink-soft:     #8893A1;   /* tertiary */
  --color-soft-white:   #F4F0E7;   /* primary text on dark */
  --color-cloud:        #A8B3B8;   /* muted text on dark */

  /* ============ Status ============ */
  --color-system-green: #2BC57D;
  --color-warning-amber:#F0A030;
  --color-signal-red:   #E5484D;

  /* ============ Light borders ============ */
  --color-light-border: #E4DACA;   /* warm border on cream */
  --color-light-border-strong: #C9BCA3;

  /* ============ Semantic tokens — LIGHT default ============ */
  --bg:              var(--color-cream);
  --bg-elevated:     var(--color-paper);
  --bg-deep:         var(--color-cream-deep);
  --bg-panel:        var(--color-off-white);
  --bg-brand:        var(--color-brand-teal);
  --bg-dark:         var(--color-obsidian);

  --fg:              var(--color-ink);
  --fg-muted:        var(--color-ink-muted);
  --fg-soft:         var(--color-ink-soft);
  --fg-inverse:      var(--color-paper);
  --fg-on-brand:     var(--color-paper);

  --border:          var(--color-light-border);
  --border-strong:   var(--color-light-border-strong);

  --accent:          var(--color-brand-teal);
  --accent-deep:     var(--color-brand-teal-deep);
  --accent-fg:       var(--color-paper);

  /* legacy aliases kept for back-compat in existing files */
  --color-signal-cyan: var(--color-brand-teal);
  --color-graphite-legacy: var(--color-graphite);

  /* ============ Typography ============ */
  --font-sans: "Albert Sans", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "DM Mono", "Berkeley Mono", ui-monospace, Menlo, monospace;

  --fs-hero:        clamp(48px, 6.8vw, 92px);
  --fs-h1:          clamp(40px, 4.6vw, 68px);
  --fs-h2:          clamp(32px, 3.4vw, 52px);
  --fs-h3:          clamp(24px, 2.2vw, 32px);
  --fs-h4:          22px;
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-label:       12px;

  --lh-tight:       1.02;
  --lh-snug:        1.12;
  --lh-body:        1.55;
  --lh-relaxed:     1.65;

  --tracking-display: -0.024em;
  --tracking-tight:   -0.014em;
  --tracking-normal:  0;
  --tracking-label:   0.10em;
  --tracking-mono:    0.02em;

  /* ============ Spacing ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============ Radii ============ */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;

  /* ============ Elevation ============ */
  --shadow-card:   0 1px 2px rgba(14,26,31,0.04), 0 12px 32px -18px rgba(14,26,31,0.18);
  --shadow-hover:  0 1px 2px rgba(14,26,31,0.06), 0 24px 56px -22px rgba(14,26,31,0.26);
  --shadow-teal:   0 18px 50px -24px rgba(26,155,155,0.55);
  --shadow-deep:   0 24px 80px -28px rgba(8,19,23,0.4);

  /* ============ Motion ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =========================================================
   Surface modifiers — apply to any section to switch its palette
   ========================================================= */

.surface-cream  { background: var(--color-cream);      color: var(--color-ink); }
.surface-paper  { background: var(--color-paper);      color: var(--color-ink); }
.surface-off    { background: var(--color-off-white);  color: var(--color-ink); }
.surface-deep   { background: var(--color-cream-deep); color: var(--color-ink); }

/* Brand teal surface — for hero CTAs and signature moments */
.surface-brand {
  background: var(--color-brand-teal);
  color: var(--color-paper);
  --fg: var(--color-paper);
  --fg-muted: rgba(255,255,255,0.72);
  --fg-soft: rgba(255,255,255,0.5);
  --border: rgba(255,255,255,0.18);
  --border-strong: rgba(255,255,255,0.32);
  --accent: #FFFFFF;
  --accent-fg: var(--color-brand-teal);
}

/* Blueprint surface — for technical drawings, the brand's signature */
.surface-blueprint {
  background: var(--color-blueprint);
  color: var(--color-blueprint-ink);
  --fg: var(--color-blueprint-ink);
  --fg-muted: var(--color-blueprint-ink-mute);
  --fg-soft: rgba(230,241,241,0.45);
  --border: rgba(230,241,241,0.18);
  --border-strong: var(--color-blueprint-line-strong);
  --bg: var(--color-blueprint);
  --bg-elevated: rgba(255,255,255,0.04);
  --bg-deep: var(--color-blueprint-deep);
  --accent: #22B8B8;
  --accent-fg: var(--color-blueprint);
}

.blueprint-grid {
  background-image:
    linear-gradient(rgba(230,241,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,241,241,0.06) 1px, transparent 1px),
    linear-gradient(rgba(230,241,241,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,241,241,0.025) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

/* Dark operating-console surface — for diagrams + technical moments */
.surface-dark {
  background: var(--color-obsidian);
  color: var(--color-soft-white);
  --fg: var(--color-soft-white);
  --fg-muted: var(--color-cloud);
  --fg-soft: #6E7E84;
  --border: var(--color-panel-border);
  --border-strong: #3D5560;
  --bg: var(--color-obsidian);
  --bg-elevated: var(--color-graphite);
  --bg-deep: var(--color-deep-navy);
  --accent: var(--color-brand-teal-bright);
  --accent-fg: var(--color-obsidian);
}

/* =========================================================
   Element defaults
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  margin: 0;
}

.hero, h1.hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: 0;
}

h4, .h4 { font-size: var(--fs-h4); line-height: 1.32; font-weight: 600; margin: 0; }

p, .body  { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-muted); }

.label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  font-size: 0.92em;
}

::selection {
  background: rgba(26,155,155,0.25);
  color: var(--color-ink);
}
.surface-dark ::selection,
.surface-brand ::selection {
  background: rgba(255,255,255,0.25);
  color: inherit;
}