/* ============================================================
   Coherent Consciousness — Foundations
   colors_and_type.css
   Philosophy: "Living in Coherence"
   Aesthetic: dark academia meets natural elements
   ------------------------------------------------------------
   Fonts loaded via Google Fonts in each HTML file:
   Playfair Display (display/headings), Libre Baskerville
   (body serif), DM Sans (UI / body sans).
   ============================================================ */

/* ---------- @font-face (self-hosted in /fonts) ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Variable.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand core (the seven) ---------- */
  --bark-red:    #7C2424;  /* deep brand red — primary action    */
  --ember:       #C00A04;  /* bright red — emphasis, alerts      */
  --amber:       #DF9244;  /* sun amber — secondary accent       */
  --candlelight: #F4C157;  /* golden glow — highlights           */
  --parchment:   #FFF8E5;  /* base page background, warm cream    */
  --forest:      #32382D;  /* deep olive green — grounding        */
  --ink:         #000000;  /* pure black — deepest text/marks     */

  /* ---------- Bark Red scale ---------- */
  --bark-red-700: #5C1818;
  --bark-red-600: #6C1F1F;
  --bark-red-500: #7C2424;
  --bark-red-400: #98403B;
  --bark-red-300: #BE7D77;
  --bark-red-100: #ECD4D0;

  /* ---------- Ember scale (bright accent red) ---------- */
  --ember-600: #A20803;
  --ember-500: #C00A04;
  --ember-400: #D63A33;
  --ember-100: #F6D5D2;

  /* ---------- Forest scale ---------- */
  --forest-800: #1D2118;
  --forest-700: #282D22;
  --forest-600: #32382D;
  --forest-500: #404838;
  --forest-400: #5C6450;
  --forest-300: #8B9180;
  --forest-100: #D6D9CD;

  /* ---------- Amber scale (sun) ---------- */
  --amber-700: #AE6826;
  --amber-600: #C97D33;
  --amber-500: #DF9244;
  --amber-400: #E8AB68;
  --amber-300: #F0C695;
  --amber-100: #F9E7CE;

  /* ---------- Candlelight scale (golden) ---------- */
  --candlelight-600: #E0A832;
  --candlelight-500: #F4C157;
  --candlelight-400: #F7D078;
  --candlelight-300: #FAE0A3;
  --candlelight-100: #FDF1D2;

  /* ---------- Warm neutrals (parchment / cream) ---------- */
  --parchment-deep:#F6ECCF;   /* sunk panels, wells            */
  --linen:         #FFFCF4;   /* lightest surface, cards on bg */
  --clay-100:      #ECE1C4;   /* hairline borders on warm bg   */
  --clay-200:      #DCCDA7;   /* stronger dividers             */
  --stone-400:     #ABA083;   /* muted text on light           */
  --stone-500:     #847A60;   /* captions, metadata            */

  /* ---------- Ink scale (text + dark grounds) ---------- */
  --ink-soft:  #211D17;  /* dark panel that isn't pure black  */
  --ink-700:   #34302A;
  --espresso:  #1F1813;  /* warm near-black for dark sections */

  /* ============================================================
     SEMANTIC — foreground / text
     ============================================================ */
  --fg-1: #1C1814;             /* primary text — warm near-black */
  --fg-2: #4A4136;             /* secondary body text          */
  --fg-3: var(--stone-500);    /* captions, metadata, labels   */
  --fg-muted: var(--stone-400);
  --fg-on-dark:    var(--parchment);  /* text on dark grounds  */
  --fg-on-dark-2:  #C9BC9C;           /* secondary on dark     */
  --fg-on-accent:  var(--linen);      /* text on bark/forest   */
  --fg-link: var(--bark-red-600);
  --fg-link-hover: var(--bark-red-700);

  /* ============================================================
     SEMANTIC — surfaces / backgrounds
     ============================================================ */
  --bg-page:      var(--parchment);
  --bg-surface:   var(--linen);          /* cards on the page     */
  --bg-sunken:    var(--parchment-deep);
  --bg-glow:      var(--candlelight-100); /* warm callout panels  */
  --bg-dark:      var(--forest-700);     /* dark academia section */
  --bg-ink:       var(--espresso);       /* deepest section       */
  --bg-accent:    var(--bark-red-500);
  --bg-accent-2:  var(--forest-600);

  /* ============================================================
     SEMANTIC — borders / lines
     ============================================================ */
  --border:        var(--clay-100);
  --border-strong: var(--clay-200);
  --border-on-dark: rgba(255, 248, 229, 0.16);
  --ring: rgba(124, 36, 36, 0.32);   /* focus ring, bark red    */

  /* ============================================================
     SEMANTIC — interactive states
     ============================================================ */
  --action:           var(--bark-red-500);
  --action-hover:     var(--bark-red-600);
  --action-press:     var(--bark-red-700);
  --action-2:         var(--forest-600);
  --action-2-hover:   var(--forest-700);
  --action-2-press:   var(--forest-800);
  --highlight:        var(--amber-500);
  --highlight-soft:   var(--amber-100);
  --alert:            var(--ember-500);

  /* ============================================================
     RADII — rounded, organic
     ============================================================ */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  34px;
  --r-pill: 999px;
  --r-organic: 42% 58% 56% 44% / 50% 46% 54% 50%; /* @kind radius */

  /* ============================================================
     SHADOWS — soft, warm, low-contrast (no harsh black)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(31, 24, 19, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 24, 19, 0.09);
  --shadow-md: 0 6px 18px rgba(31, 24, 19, 0.11);
  --shadow-lg: 0 16px 40px rgba(31, 24, 19, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(31, 24, 19, 0.07);
  --shadow-glow: 0 0 0 1px rgba(223, 146, 68, 0.28), 0 8px 30px rgba(244, 193, 87, 0.22);

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Libre Baskerville", Georgia, serif;
  --font-sans:    "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* fluid type scale (clamped) */
  --t-display:  clamp(48px, 7vw, 84px); /* @kind font */
  --t-h1:       clamp(38px, 5vw, 60px); /* @kind font */
  --t-h2:       clamp(30px, 3.4vw, 42px); /* @kind font */
  --t-h3:       clamp(24px, 2.4vw, 30px); /* @kind font */
  --t-h4:       20px;
  --t-body-lg:  19px;
  --t-body:     17px;
  --t-body-sm:  15px;
  --t-caption:  13px;
  --t-overline: 12px;

  --lh-tight: 1.08; /* @kind other */
  --lh-snug:  1.25; /* @kind other */
  --lh-body:  1.65; /* @kind other */
  --lh-loose: 1.8; /* @kind other */

  --tracking-display: -0.01em;
  --tracking-overline: 0.18em;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  font-style: italic;
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-body-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-overline);
  line-height: 1;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--bark-red-500);
}

/* Convenience element defaults (opt-in via .prose) */
.prose h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg-1); }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.prose p  { font-family: var(--font-serif); font-size: var(--t-body); line-height: var(--lh-loose); color: var(--fg-2); }
.prose a  { color: var(--fg-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--fg-link-hover); }