/* ============================================================
   Célia Beuzeville · Foundations (colors + type)
   Import this file: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Web font (Inter) ---------- */
/* Inter is the approved web substitute for Segoe UI / Helvetica Neue
   declared in DESIGN.md. Same vertical metrics, same rhythm. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* ============================================================
     COLORS — base tokens
     ============================================================ */

  /* Brand */
  --color-brand-terracotta: #d65a23; /* primary accent — CTAs, badges, rules */
  --color-brand-bordeau:    #6b1d10; /* signed titles, sub-section bands */
  --color-brand-orange:     #e87a3a; /* warm hover, gradient stop */
  --color-brand-ocre:       #f1a96a; /* light variant — text on bordeau */
  --color-brand-amber-deep: #b03d15; /* deep variant — gradient start */

  /* Surfaces */
  --color-surface-cream:    #fdf8f1; /* default page bg — never pure white */
  --color-surface-peach:    #fde6cf; /* default card bg */
  --color-surface-peach-2:  #fbe2c8; /* info / quote box bg */
  --color-surface-peach-3:  #fbe1c4; /* key-points block bg */
  --color-surface-table-a:  #fcebd6; /* table odd row */
  --color-surface-table-b:  #fef3e3; /* table even row */
  --color-surface-white:    #ffffff; /* exceptional only */

  /* Text */
  --color-text-primary:     #3a221a; /* dark brown — never pure black */
  --color-text-soft:        #6b4337; /* secondary, captions, footers */
  --color-text-on-dark:     #ffffff;
  --color-text-on-dark-soft:#f1a96a; /* ocre on bordeau */

  /* Lines & semantics */
  --color-rule-soft:        #ecd0b3;
  --color-success:          #5a7a2e;
  --color-warning:          #d4942a;
  --color-danger:           #b03d15;

  /* Apparel / portrait neutrals — sage / khaki sweater pulled from Célia's portrait.
     Use as a calm secondary accent: button outlines on cream, body emphasis on
     terracotta-heavy layouts, navigation rules. NEVER as a primary surface. */
  --color-accent-sage:      #6e7d62; /* main sweater tone */
  --color-accent-sage-deep: #4f5c46; /* shadow side, hover */
  --color-accent-sage-soft: #a4b095; /* light wash, dividers */

  /* Signature gradient — always 135° */
  --gradient-signature:
    linear-gradient(135deg,
      var(--color-brand-amber-deep) 0%,
      var(--color-brand-terracotta) 45%,
      var(--color-brand-orange) 100%);

  /* ============================================================
     TYPE — base tokens
     ============================================================ */

  --font-family-base: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-family-display: var(--font-family-base);
  --font-family-mono: ui-monospace, "SF Mono", Consolas, monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-heavy:    800;

  --font-size-display: 3.5rem;   /* 56px / 44pt */
  --font-size-h1:      1.75rem;  /* 28px / 22pt */
  --font-size-h2:      1rem;     /* 16px / 12pt */
  --font-size-h3:      0.875rem; /* 14px / 10pt */
  --font-size-body-lg: 0.9375rem;/* 15px / 11pt */
  --font-size-body:    0.875rem; /* 14px / 9.5pt */
  --font-size-small:   0.75rem;  /* 12px / 8.5pt */
  --font-size-eyebrow: 0.6875rem;/* 11px / 8pt  */

  --line-height-tight:   1.0;
  --line-height-snug:    1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-h1:     -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-eyebrow: 0.22em;

  /* ============================================================
     SEMANTIC TOKENS — use these in product code
     ============================================================ */

  /* Foreground / background */
  --fg-1: var(--color-text-primary);   /* primary text */
  --fg-2: var(--color-text-soft);      /* secondary text */
  --fg-on-dark: var(--color-text-on-dark);
  --fg-accent: var(--color-brand-terracotta);
  --fg-signed: var(--color-brand-bordeau);

  --bg-page:   var(--color-surface-cream);
  --bg-card:   var(--color-surface-peach);
  --bg-quote:  var(--color-surface-peach-2);
  --bg-key:    var(--color-surface-peach-3);
  --bg-strong: var(--color-brand-bordeau);
  --bg-accent: var(--color-brand-terracotta);

  --border-soft: var(--color-rule-soft);

  /* Spacing — 8px scale, mm-equivalent values from DESIGN.md */
  --space-1: 8px;   /* 2mm  */
  --space-2: 12px;  /* 3mm  */
  --space-3: 16px;  /* 4mm  */
  --space-4: 24px;  /* 6mm  */
  --space-5: 32px;  /* 8mm  */
  --space-6: 48px;  /* 12mm */
  --space-7: 64px;  /* 16mm */
  --space-8: 88px;  /* 22mm */

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Elevation — kept very subtle on purpose */
  --shadow-card:   0 2px 4px rgba(58, 34, 26, 0.04);
  --shadow-raised: 0 4px 8px rgba(58, 34, 26, 0.08);

  /* Vertical accent bar — signature device */
  --bar-thin: 3px;
  --bar:      4px;
  --bar-bold: 6px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply tokens directly — drop these classes into any HTML.
   ============================================================ */

body {
  font-family: var(--font-family-base);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display,
h1.display {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--fg-signed);
  margin: 0;
}

.t-h1, h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heavy);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-h1);
  color: var(--fg-signed);
  margin: 0 0 var(--space-2) 0;
}

.t-h2, h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-snug);
  color: var(--fg-signed);
  margin: 0 0 var(--space-1) 0;
}

.t-h3, h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--fg-signed);
  margin: 0 0 var(--space-1) 0;
}

.t-body-lg {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  color: var(--fg-1);
}

.t-body, p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--fg-1);
  margin: 0 0 var(--space-2) 0;
}

.t-small {
  font-size: var(--font-size-small);
  line-height: 1.35;
  color: var(--fg-2);
}

.t-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.t-mono { font-family: var(--font-family-mono); }
.t-italic { font-style: italic; }
.t-bordeau { color: var(--fg-signed); }
.t-terracotta { color: var(--fg-accent); }