/*
 * Lammel Advisory — colors_and_type.css
 *
 * Single-file drop-in for plain HTML prototypes. Combines:
 *   - Base color tokens  (surfaces, palette, semantic families)
 *   - Base type tokens   (font stack, weights, scale)
 *   - Semantic utilities (h1–h4, p, small, .muted, .code, etc.)
 *   - Motion + elevation vars
 *
 * Philosophy:
 *   White floating islands on a warm Anthropic cream canvas.
 *   Intercom-inspired geometry: sharp 4px buttons, scale interactions,
 *   warm parchment borders, editorial negative letter-spacing on headings.
 *
 * Primary:   #cc785c  Claude coral  (CTAs, links, focus)
 * Tertiary:  #d4a27f  Warm beige    (AI highlights, warmth accents)
 * Canvas:    #f5f4ed  Anthropic cream
 */

/* ---------------------------------------------------------------
   FONT FACE — Inter (self-hosted woff2, see fonts/)
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('fonts/Inter-Variable.woff2') format('woff2');
}

/* ---------------------------------------------------------------
   LIGHT THEME (default)
   --------------------------------------------------------------- */
:root {
  /* === SURFACES === */
  --surface:                    #ffffff;   /* floating islands */
  --surface-dim:                #f5f4ed;   /* canvas / app shell */
  --surface-bright:             #ffffff;
  --surface-container-lowest:   #f5f4ed;   /* icon rail */
  --surface-container-low:      #f9f8f2;   /* sidebar island */
  --surface-container:          #f0eee5;   /* muted areas, table headers */
  --surface-container-high:     #ffffff;   /* popovers */
  --surface-container-highest:  #ffffff;   /* dialogs */
  --surface-variant:            #ebe7dc;   /* hover/active */

  /* === TEXT / FG === */
  --on-surface:                 #181818;   /* primary text — near-black */
  --on-surface-variant:         #6b6b6b;   /* secondary text — warm neutral */

  --fg1: var(--on-surface);
  --fg2: var(--on-surface-variant);
  --fg3: #9a948a;                           /* tertiary / placeholder */
  --fg-inverse: #f5f4ed;

  /* === PRIMARY — Claude Coral === */
  --primary:                    #cc785c;
  --primary-hover:              #b8694f;
  --primary-active:             #a35c44;
  --on-primary:                 #ffffff;
  --primary-container:          #f5dcd0;
  --on-primary-container:       #5c2818;

  /* === SECONDARY — Warm Neutral === */
  --secondary:                  #6b6b6b;
  --on-secondary:               #ffffff;
  --secondary-container:        #ece8de;
  --on-secondary-container:     #181818;

  /* === TERTIARY — Warm Beige (AI accent) === */
  --tertiary:                   #d4a27f;
  --on-tertiary:                #ffffff;
  --tertiary-container:         #f4e8db;
  --on-tertiary-container:      #6e3f1e;

  /* === STATUS === */
  --error:                      #c1392b;
  --on-error:                   #ffffff;
  --error-container:            #fdf0ee;
  --on-error-container:         #8b1a10;

  --warning:                    #c17b2b;
  --on-warning:                 #ffffff;
  --warning-container:          #fdf3e3;
  --on-warning-container:       #7a4610;

  --success:                    #4a7c4d;
  --on-success:                 #ffffff;
  --success-container:          #dde8d8;
  --on-success-container:       #1f4422;

  /* === BORDERS === */
  --outline:                    #b3ada1;
  --outline-variant:            #e8e4d8;   /* warm parchment — default border */
  --ai-border:                  #cc785c;   /* AI content left border */

  /* === INVERSE === */
  --inverse-surface:            #181818;
  --inverse-on-surface:         #f5f4ed;
  --inverse-primary:            #e8a48a;

  --scrim:                      #000000;

  /* === RADIUS === */
  --radius-sm:  4px;   /* buttons — sharp, Intercom-style */
  --radius-md:  6px;
  --radius-lg:  8px;   /* inputs, small cards */
  --radius-xl:  12px;  /* islands, main cards */
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* === SPACING (8px base) === */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === ELEVATION (warm-tinted, brown undertone) === */
  --elevation-0: none;
  --elevation-1: 0 4px 12px 0 rgb(28 25 23 / 0.06), 0 1px 3px 0 rgb(28 25 23 / 0.04);
  --elevation-2: 0 8px 24px 0 rgb(28 25 23 / 0.07), 0 2px 6px 0 rgb(28 25 23 / 0.05);
  --elevation-3: 0 16px 32px 0 rgb(28 25 23 / 0.09), 0 4px 12px 0 rgb(28 25 23 / 0.06);

  /* === MOTION === */
  --motion-standard:             cubic-bezier(0.2, 0, 0, 1);
  --motion-standard-decelerate:  cubic-bezier(0, 0, 0, 1);
  --motion-standard-accelerate:  cubic-bezier(0.3, 0, 1, 1);
  --motion-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --motion-short:  150ms;
  --motion-medium: 200ms;
  --motion-long:   300ms;
  --motion-xl:     500ms;

  /* === TYPE — BASE === */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Type scale — see README for usage mapping */
  --fs-headline-medium: 28px;
  --fs-headline-small:  24px;
  --fs-title-large:     22px;
  --fs-title-medium:    16px;
  --fs-title-small:     14px;
  --fs-body-large:      16px;
  --fs-body-medium:     14px;
  --fs-body-small:      12px;
  --fs-label-large:     14px;
  --fs-label-medium:    12px;
  --fs-label-small:     11px;

  /* Editorial negative letter-spacing on headings */
  --ls-headline-medium: -0.03em;
  --ls-headline-small:  -0.025em;
  --ls-title-large:     -0.02em;
  --ls-title-medium:    -0.01em;
  --ls-title-small:     -0.005em;
  --ls-body:            0.25px;
  --ls-label:           0.5px;
}

/* ---------------------------------------------------------------
   DARK THEME
   --------------------------------------------------------------- */
.dark,
[data-theme='dark'] {
  --surface:                    #141312;
  --surface-dim:                #0f0e0d;
  --surface-bright:             #2a2724;
  --surface-container-lowest:   #0f0e0d;
  --surface-container-low:      #1a1714;
  --surface-container:          #211e1a;
  --surface-container-high:     #282420;
  --surface-container-highest:  #2f2b26;
  --surface-variant:            #2f2b26;

  --on-surface:                 #ede9e4;
  --on-surface-variant:         #a39a8f;
  --fg1: var(--on-surface);
  --fg2: var(--on-surface-variant);
  --fg3: #6f675d;

  --primary:                    #e8a48a;
  --primary-hover:              #f0b69e;
  --primary-active:             #d8937a;
  --on-primary:                 #4a1a0a;
  --primary-container:          #6e2e18;
  --on-primary-container:       #f9d8c8;

  --secondary:                  #b5aca4;
  --on-secondary:               #1c1917;
  --secondary-container:        #2a2724;
  --on-secondary-container:     #d9d1c9;

  --tertiary:                   #e8c4a4;
  --on-tertiary:                #4a2c14;
  --tertiary-container:         #5c3e22;
  --on-tertiary-container:      #f4e0c8;

  --error:                      #f87171;
  --error-container:            #450a0a;
  --on-error-container:         #fecaca;

  --warning:                    #fbbf24;
  --warning-container:          #451a03;
  --on-warning-container:       #fde68a;

  --success:                    #86c489;
  --success-container:          #1e4f28;
  --on-success-container:       #b2e8bb;

  --outline:                    #5c5650;
  --outline-variant:             #2f2b26;
  --ai-border:                  #e8a48a;

  --inverse-surface:            #ede9e4;
  --inverse-on-surface:         #1c1917;
  --inverse-primary:            #cc785c;

  --elevation-1: 0 4px 12px 1px rgb(0 0 0 / 0.5), 0 1px 3px 0 rgb(0 0 0 / 0.7);
  --elevation-2: 0 8px 24px 2px rgb(0 0 0 / 0.5), 0 2px 6px 0 rgb(0 0 0 / 0.7);
  --elevation-3: 0 16px 32px 3px rgb(0 0 0 / 0.5), 0 4px 12px 0 rgb(0 0 0 / 0.7);
}

/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-short: 0ms;
    --motion-medium: 0ms;
    --motion-long: 0ms;
    --motion-xl: 0ms;
  }
}

/* ===============================================================
   BASE STYLES
   =============================================================== */
html {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--surface-dim);
  color: var(--on-surface);
  font-size: var(--fs-body-medium);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* ===============================================================
   SEMANTIC TYPE — tag-level defaults
   =============================================================== */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-headline-medium);
  line-height: 1.05;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline-medium);
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-size: var(--fs-headline-small);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline-small);
  color: var(--fg1);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-size: var(--fs-title-large);
  line-height: 1.15;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-title-large);
  color: var(--fg1);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-size: var(--fs-title-medium);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-title-medium);
  color: var(--fg1);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-size: var(--fs-body-medium);
  line-height: 1.55;
  color: var(--fg1);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

small, .small {
  font-size: var(--fs-body-small);
  color: var(--fg2);
  letter-spacing: var(--ls-body);
}

.muted, .fg2 { color: var(--fg2); }
.fg3           { color: var(--fg3); }
.accent        { color: var(--primary); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--motion-short) var(--motion-standard);
}
a:hover  { color: var(--primary-hover); }
a:active { color: var(--primary-active); }
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-container);
  color: var(--fg1);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
}

/* ===============================================================
   TYPE UTILITIES — explicit scale (matches Tailwind names)
   =============================================================== */
.text-headline-medium {
  font-size: var(--fs-headline-medium);
  line-height: 1.05;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline-medium);
}
.text-headline-small {
  font-size: var(--fs-headline-small);
  line-height: 1.05;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline-small);
}
.text-title-large {
  font-size: var(--fs-title-large);
  line-height: 1.10;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-title-large);
}
.text-title-medium {
  font-size: var(--fs-title-medium);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-title-medium);
}
.text-title-small {
  font-size: var(--fs-title-small);
  line-height: 1.43;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-title-small);
}
.text-body-large {
  font-size: var(--fs-body-large);
  line-height: 1.5;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
}
.text-body-medium {
  font-size: var(--fs-body-medium);
  line-height: 1.43;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
}
.text-body-small {
  font-size: var(--fs-body-small);
  line-height: 1.33;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
}
.text-label-large {
  font-size: var(--fs-label-large);
  line-height: 1.43;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}
.text-label-medium {
  font-size: var(--fs-label-medium);
  line-height: 1.33;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}
.text-label-small {
  font-size: var(--fs-label-small);
  line-height: 1.45;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}