/* =========================================================
   Delphoria Design System — colors_and_type.css
   Foundation tokens for color, type, spacing, radii, shadow.
   ========================================================= */

/* ---- Fonts ----
   NOTE: No official font files were provided. Substitutions:
   - Display serif: "Lora" (Google Fonts) — humanist serif evoking
     classical/Oracle of Delphi authority while remaining modern.
   - Body sans: "Source Sans 3" (Google Fonts) — clean, legal-doc
     readable.
   - Mono: "JetBrains Mono" — for technical/data callouts.
   Please replace with brand fonts if you have specifics. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand palette ---- */
  --color-forest-green:    #21483A;  /* Primary brand */
  --color-deep-evergreen:  #2F5B43;  /* Secondary dark accents */
  --color-sage:            #7A9369;  /* Icons, callout boxes */
  --color-burnt-orange:    #C97A22;  /* Accent lines, buttons */
  --color-cream:           #F7F3EA;  /* Primary background */
  --color-warm-gray:       #F2F2F0;  /* Section backgrounds */
  --color-charcoal:        #333333;  /* Body text */
  --color-medium-gray:     #6B6B6B;  /* Secondary text */

  /* Tints derived for hover/borders */
  --color-forest-900:      #16302a;
  --color-forest-700:      #21483A;
  --color-forest-500:      #2F5B43;
  --color-forest-300:      #7A9369;
  --color-forest-100:      #d8e1d2;
  --color-forest-50:       #ecefe6;

  --color-orange-600:      #a96414;
  --color-orange-500:      #C97A22;
  --color-orange-400:      #d99452;
  --color-orange-100:      #f3dec1;

  --color-cream-100:       #F7F3EA;
  --color-cream-200:       #ede8d8;
  --color-stone-border:    #e5e0d1;

  /* ---- Semantic surfaces ---- */
  --bg-page:           var(--color-cream);
  --bg-section:        var(--color-warm-gray);
  --bg-elevated:       #ffffff;
  --bg-inverse:        var(--color-forest-green);
  --bg-callout-sage:   #e7ede0;        /* sage tint */
  --bg-callout-cream:  var(--color-cream-200);

  --fg-primary:        var(--color-charcoal);
  --fg-secondary:      var(--color-medium-gray);
  --fg-onDark:         var(--color-cream);
  --fg-onDark-muted:   #c8d0c5;
  --fg-heading:        var(--color-forest-green);
  --fg-accent:         var(--color-burnt-orange);
  --fg-link:           var(--color-forest-green);
  --fg-link-hover:     var(--color-burnt-orange);

  --border-subtle:     var(--color-stone-border);
  --border-default:    #d4cdb9;
  --border-strong:     var(--color-forest-green);
  --border-accent:     var(--color-burnt-orange);

  /* Semantic state colors (lint, success, warn, error) — chosen to harmonize */
  --color-success:     #4a7a4a;
  --color-warning:     #C97A22;
  --color-danger:      #a23a2a;
  --color-info:        #2F5B43;

  /* ---- Typography ---- */
  --font-display: "Lora", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (modular ~1.2) */
  --fs-display:  64px;
  --fs-h1:       44px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-overline: 11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-overline:  0.14em;

  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Shadows (low, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(33, 72, 58, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 72, 58, 0.08);
  --shadow-md: 0 6px 16px rgba(33, 72, 58, 0.10);
  --shadow-lg: 0 14px 32px rgba(33, 72, 58, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --gutter:        24px;
}

/* ---- Base ---- */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Semantic type classes (use these in HTML/JSX) ---- */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
}
.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
}
.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
}
.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
}
.t-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
  letter-spacing: 0;
}
.t-body-lg, .lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.t-body-sm, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}
.t-overline, .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-burnt-orange);
}
.t-mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Display variant in italic — used sparingly for editorial pull-quotes */
.t-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* Link defaults */
a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

/* Selection */
::selection {
  background: var(--color-burnt-orange);
  color: var(--color-cream);
}