/* ============================================================
   Premura — Colors & Type
   ------------------------------------------------------------
   The visual foundation for the Premura admin console and
   marketing surfaces. Calm clinical aesthetic — warm cream
   neutrals, deep teal brand, warm clay accent used sparingly.

   Brand palette
     · Deep Teal      #0F4C5C  primary, logo, headers, buttons
     · Clay           #E07A66  accent — < 8% of any surface
     · Warm Cream     #F7F3EE  background
     · Fresh Mint     #2FA99C  success, agent-up indicator

   Fonts (Google Fonts):
     Inter            — UI sans
     Instrument Serif — italic display accent (page titles)
     JetBrains Mono   — code, phone numbers, timestamps
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Type system ----- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Body text sits at 13px — the console is dense by design. Marketing
     surfaces step everything up; tweak the scale, not the components. */
  --fs-xs:    11px;   /* eyebrow, table headers (uppercase + tracked) */
  --fs-sm:    12px;   /* hint, badge, secondary labels                */
  --fs-base:  13px;   /* body, controls, table cells                  */
  --fs-md:    14px;   /* section subheads                             */
  --fs-lg:    16px;   /* modal titles                                 */
  --fs-xl:    22px;   /* page titles                                  */
  --fs-2xl:   32px;   /* marketing display                            */
  --fs-3xl:   48px;   /* marketing hero                               */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* ----- Neutrals — warm cream base ----- */
  --bg:           #F7F3EE;
  --bg-elev:      #ffffff;
  --bg-sunken:    #EFE9DF;
  --bg-hover:     #E9E2D4;
  --bg-active:    #E1D7C4;

  --border:        #E2DCCF;
  --border-strong: #CFC6B3;
  --border-muted:  #EBE4D6;

  --text:           #0A0E14;
  --text-secondary: #2F3842;
  --text-muted:     #5A6B7A;
  --text-disabled:  #9CAAB8;

  /* ----- Brand mark badge tokens ----- */
  --brand-mark-bg: #0F4C5C;
  --brand-mark-fg: #F7F2E8;

  /* ----- Primary — Deep Teal — workhorse brand color ----- */
  --primary:        #0F4C5C;
  --primary-hover:  #0B3A47;
  --primary-active: #083038;
  --primary-subtle: #E3EDF0;
  --primary-border: #B8CED4;
  --primary-text:   #0A3A47;

  /* ----- Accent — Clay — RESERVED for: ----- *
   *   · live indicators        · italic-serif emphasis            *
   *   · the Publish CTA        · destructive/alert affordances    *
   *   Goal: < 8% of any rendered surface. Default to Deep Teal.   *
   *   Softer terracotta — calmer than signal coral, still warm.   */
  --accent:         #E07A66;
  --accent-hover:   #C9624D;
  --accent-subtle:  #FBEEE9;
  --accent-border:  #F1C6BB;
  --accent-text:    #9C4030;

  /* Selection — radios, focus rings, selected rows route through
     Deep Teal so clay stays scarce. */
  --selection:        var(--primary);
  --selection-hover:  var(--primary-hover);
  --selection-subtle: var(--primary-subtle);
  --selection-border: var(--primary-border);
  --selection-text:   var(--primary-text);
  --selection-ring:   rgba(15, 76, 92, .18);

  /* ----- Semantic ----- */
  --success:        #2FA99C;
  --success-soft:   #4ECDC4;
  --success-subtle: #E6F7F5;
  --success-border: #B4E6E1;

  --warn:        #C97D2B;
  --warn-subtle: #FBF1E3;
  --warn-border: #EACFA3;

  --danger:        #B8302A;
  --danger-subtle: #FBE8E6;
  --danger-border: #EBB8B3;

  --info:        #0F4C5C;
  --info-subtle: #E3EDF0;

  /* ----- Radii ----- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* ----- Shadows — subtle, low-spread, never floaty ----- */
  --shadow-xs: 0 1px 1px rgba(10,14,20,.04);
  --shadow-sm: 0 1px 2px rgba(10,14,20,.06), 0 1px 1px rgba(10,14,20,.03);
  --shadow-md: 0 4px 12px -2px rgba(10,14,20,.08), 0 2px 4px -2px rgba(10,14,20,.05);
  --shadow-lg: 0 20px 40px -8px rgba(15,76,92,.14), 0 8px 16px -4px rgba(10,14,20,.06);

  /* ----- Spacing scale (4px base) ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ----- Layout ----- */
  --nav-w: 228px;
  --topbar-h: 52px;
}

/* ============================================================
   Dark theme — Deep Teal background per brand book
   ============================================================ */
[data-theme="dark"] {
  --bg:        #071E25;
  --bg-elev:   #0E2E38;
  --bg-sunken: #0A252D;
  --bg-hover:  #133A46;
  --bg-active: #194857;

  --border:        #1B4453;
  --border-strong: #2B5F70;
  --border-muted:  #132E38;

  --text:           #F3EEE4;
  --text-secondary: #D6D0C3;
  --text-muted:     #9FB0B8;
  --text-disabled:  #5E7580;

  --primary:        #3FA0AE;
  --primary-hover:  #5AB5C2;
  --primary-active: #74C7D3;
  --primary-subtle: #123944;
  --primary-border: #285768;
  --primary-text:   #9FD8E0;

  --brand-mark-bg: #1E6B7B;
  --brand-mark-fg: #F7F2E8;

  --accent:        #EB9A88;
  --accent-hover:  #F2AD9D;
  --accent-subtle: #3A2520;
  --accent-border: #5C3A33;
  --accent-text:   #F5BAAB;

  --success:        #4ECDC4;
  --success-soft:   #7FDCD5;
  --success-subtle: #133B38;
  --success-border: #245A54;

  --warn:        #E8A963;
  --warn-subtle: #3A2B14;
  --warn-border: #5C4521;

  --danger:        #E26456;
  --danger-subtle: #3A1814;
  --danger-border: #5C2924;

  --info:        #7CC4CE;
  --info-subtle: #133A46;

  --selection:        #7CC4CE;
  --selection-hover:  #9BD5DE;
  --selection-subtle: #133A46;
  --selection-border: #2B5F70;
  --selection-text:   #B3E0E8;
  --selection-ring:   rgba(124, 196, 206, .22);

  --shadow-xs: 0 1px 1px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 40px -8px rgba(0,0,0,.6), 0 8px 16px -4px rgba(0,0,0,.4);
}

/* ============================================================
   Semantic typography — apply directly to headings/body
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  color: var(--primary);
  margin: 0;
}
/* Page titles use a "two-tone" pattern: Deep Teal sans + a single
   coral italic-serif word for emphasis. e.g. "At a glance" */
h1 .serif, .h1 .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: -.005em;
  padding: 0 1px;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  margin: 0;
}

.subtle, .hint {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-feature-settings: 'liga' 0;
}

/* Marketing display — for landing pages, decks, hero copy.
   Pairs Inter 600 with an Instrument Serif italic accent. */
.display {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--primary);
}
.display .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}