/* Kapala Studio — Design Tokens
 * Colors + Type. Both raw and semantic vars.
 * Fonts: loaded from Google Fonts CDN (see substitution note in README).
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Inter:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap');

/* Self-hosted brand mono — JetBrains Mono ExtraBold (only weight supplied) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype');
}

:root {
  /* ────────────── RAW PALETTE ────────────── */
  /* Core brand */
  --ink:        #2F5F63;   /* dunkelblau / petrol — primary */
  --paper:      #E6D3B5;   /* warmes beige — default background */
  --clay:       #B85A2B;   /* bordo terrakotta — accent */

  /* Tints & shades */
  --ink-deep:   #1E4448;   /* hover/pressed for ink */
  --ink-soft:   #5B8488;   /* muted ink, secondary text on paper */
  --ink-12:     rgba(47, 95, 99, 0.12);
  --ink-24:     rgba(47, 95, 99, 0.24);

  --clay-deep:  #963E14;   /* hover/pressed for clay */
  --clay-soft:  #D88560;   /* clay tint for backgrounds */
  --clay-12:    rgba(184, 90, 43, 0.12);

  --paper-lift: #F4E9D6;   /* cream lift over paper */
  --paper-deep: #D8C09A;   /* deeper beige for press states */

  --white:      #FBF6EC;   /* warm off-white, never #FFF */
  --black:      #16282A;   /* near-black, ink-tinted */

  /* Functional / semantic neutrals */
  --success:    #5C8453;
  --warning:    #C68B2E;
  --danger:     #A93A28;

  /* ────────────── SEMANTIC COLORS ────────────── */
  --bg:                var(--paper);
  --bg-lift:           var(--paper-lift);
  --bg-inverse:        var(--ink);
  --bg-inverse-lift:   var(--ink-deep);

  --fg1:               var(--ink);          /* primary text on paper */
  --fg2:               var(--ink-soft);     /* secondary text on paper */
  --fg-inverse-1:      var(--paper-lift);   /* primary text on ink */
  --fg-inverse-2:      var(--paper-deep);   /* secondary text on ink */

  --accent:            var(--clay);
  --accent-hover:      var(--clay-deep);
  --on-accent:         var(--paper-lift);

  --border:            var(--ink-24);
  --border-strong:     var(--ink);
  --divider:           var(--ink-12);

  --link:              var(--ink);
  --link-hover:        var(--clay);

  /* ────────────── TYPE — RAW FAMILIES ────────────── */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Playfair Display', 'Georgia', serif;   /* Eine Schrift für alles */
  --font-script:   'Caveat', 'Reenie Beanie', cursive;
  --font-mono:     ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* ────────────── TYPE — SEMANTIC ROLES ────────────── */
  /* Display */
  --type-hero:        700 clamp(48px, 6.5vw, 96px) / 1.02 var(--font-display);
  --type-display:     700 clamp(40px, 4.5vw, 64px) / 1.06 var(--font-display);
  --type-h1:          600 clamp(34px, 3.4vw, 48px) / 1.1  var(--font-display);
  --type-h2:          600 clamp(26px, 2.4vw, 34px) / 1.15 var(--font-display);
  --type-h3:          600 22px / 1.25 var(--font-display);

  /* Body */
  --type-lead:        400 20px / 1.55 var(--font-body);
  --type-body:        400 17px / 1.6  var(--font-body);
  --type-body-sm:     400 15px / 1.55 var(--font-body);
  --type-caption:     400 13px / 1.45 var(--font-body);

  /* Labels / eyebrows / stamps (ALL-CAPS, letter-spaced) */
  --type-eyebrow:     600 12px / 1.2 var(--font-body);
  --type-eyebrow-lg:  600 14px / 1.2 var(--font-body);
  --type-label:       500 13px / 1.2 var(--font-body);

  /* Handwritten marginalia */
  --type-script-sm:   500 22px / 1.2 var(--font-script);
  --type-script:      500 30px / 1.15 var(--font-script);
  --type-script-lg:   600 44px / 1.1 var(--font-script);

  /* Tracking */
  --tracking-eyebrow: 0.14em;
  --tracking-label:   0.06em;
  --tracking-tight:   -0.01em;

  /* ────────────── SPACING / RADII / SHADOWS ────────────── */
  --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;
  --space-11: 160px;

  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* Shadows — used sparingly. Ink-tinted, never gray. */
  --shadow-none:   none;
  --shadow-soft:   0 18px 32px -20px rgba(47, 95, 99, 0.25);
  --shadow-lift:   0 24px 48px -24px rgba(47, 95, 99, 0.35);
  --shadow-pin:    2px 3px 0 rgba(47, 95, 99, 0.18);  /* sticker / pinned-note */

  /* Border weights */
  --stroke-hair: 1px;
  --stroke-fine: 1.5px;
  --stroke-bold: 2px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */

  /* Layout */
  --container: 1180px;
  --container-prose: 640px;
}

/* ────────────── BASE ELEMENT STYLES ────────────── */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--fg1); margin: 0; }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--fg1); margin: 0; }
h3 { font: var(--type-h3); color: var(--fg1); margin: 0; }
p  { font: var(--type-body); color: var(--fg1); margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* Eyebrow utility */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}
.eyebrow--clay { color: var(--clay); }
.eyebrow::before {
  /* the 60×2 "tick" mark left of section headings */
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}

/* Handwritten marginalia */
.script { font: var(--type-script); color: var(--clay); transform: rotate(-2deg); display: inline-block; }