/* =============================================================
   CRIMSON COVENANT — colors_and_type.css
   Vampire-gothic dark UI tokens for Claude-powered products
   ============================================================= */

/* ---- Web fonts ---- */
@font-face {
  font-family: 'SingleGhost';
  src: url('./fonts/SingleGhost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+Bhaiksuki&display=swap');

:root {
  /* ============================================================
     COLOR — base palette
     The covenant runs on three tones: void, blood, bone.
     ============================================================ */

  /* Void — backgrounds, the night */
  --void-1000: #050304;     /* deepest crypt */
  --void-900:  #0a0608;     /* primary canvas */
  --void-800:  #110a0d;     /* raised surface */
  --void-700:  #1a1014;     /* elevated card */
  --void-600:  #251820;     /* hover surface */
  --void-500:  #33222b;     /* border / divider strong */

  /* Blood — primary brand red */
  --blood-1000: #2a0509;    /* dried, almost-black */
  --blood-900:  #4a0810;    /* deep clot */
  --blood-800:  #6e0d18;    /* vein */
  --blood-700:  #8b0e1c;    /* core crimson — the brand red */
  --blood-600:  #a8121f;    /* fresh wound */
  --blood-500:  #c71f2c;    /* arterial */
  --blood-400:  #e23548;    /* bright spill, accents */
  --blood-300:  #f56a78;    /* hover glow */
  --blood-200:  #ff9aa3;    /* faint flush */

  /* Bone — text + warm neutrals */
  --bone-100: #f5ebe4;      /* highest contrast text */
  --bone-200: #e8d5d0;      /* primary body text */
  --bone-300: #c9b3ae;      /* secondary text */
  --bone-400: #9a8782;      /* tertiary / labels */
  --bone-500: #6e5d59;      /* muted, disabled */
  --bone-600: #4a3d3a;      /* faintest copy */

  /* Ichor — desaturated gothic accents (use sparingly) */
  --ichor-violet: #4a2a55;  /* bruise — links, decorative */
  --ichor-emerald: #2d4a3a; /* absinthe — success / positive */
  --ichor-amber:  #8a6a2a;  /* candle — warning */
  --ichor-mist:   #5a6878;  /* fog — info */

  /* ============================================================
     COLOR — semantic tokens
     ============================================================ */
  --bg:               var(--void-900);
  --bg-raised:        var(--void-800);
  --bg-card:          var(--void-700);
  --bg-hover:         var(--void-600);
  --bg-inverse:       var(--bone-100);

  --fg-1:             var(--bone-100);   /* headlines */
  --fg-2:             var(--bone-200);   /* body */
  --fg-3:             var(--bone-300);   /* secondary */
  --fg-4:             var(--bone-400);   /* labels, captions */
  --fg-muted:         var(--bone-500);
  --fg-inverse:       var(--void-900);

  --accent:           var(--blood-700);
  --accent-hover:     var(--blood-600);
  --accent-press:     var(--blood-800);
  --accent-glow:      var(--blood-400);
  --accent-fg:        var(--bone-100);

  --border-subtle:    rgba(232, 213, 208, 0.06);
  --border-default:   rgba(232, 213, 208, 0.12);
  --border-strong:    rgba(232, 213, 208, 0.22);
  --border-blood:     rgba(199, 31, 44, 0.4);

  --link:             var(--blood-300);
  --link-hover:       var(--blood-200);

  --success:          var(--ichor-emerald);
  --warning:          var(--ichor-amber);
  --danger:           var(--blood-500);
  --info:             var(--ichor-mist);

  /* Selection */
  --selection-bg:     var(--blood-800);
  --selection-fg:     var(--bone-100);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: 'SingleGhost', 'UnifrakturMaguntia', 'Pirata One', serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
  --font-inscription: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;  /* Roman caps — tenets, plaques, section titles */
  --font-ritual:  'Noto Sans Bhaiksuki', 'Cormorant Garamond', serif;  /* decorative — Bhaiksuki script glyphs as ornament */
  --font-body:    var(--font-serif);

  /* ============================================================
     TYPOGRAPHY — scale (modular, ratio ~1.333)
     ============================================================ */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* body default */
  --text-lg:  19px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;
  --text-6xl: 120px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrow caps */
  --tracking-widest:  0.24em;   /* ritual labels */

  /* ============================================================
     SPACING — base 4px
     ============================================================ */
  --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 — sparingly used; gothic = sharper edges
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — interior gloom + blood glow
     ============================================================ */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.55), 0 1px 0 rgba(232,213,208,0.04) inset;
  --shadow-lg:   0 18px 48px rgba(0,0,0,0.7), 0 1px 0 rgba(232,213,208,0.05) inset;
  --shadow-crypt: 0 30px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(232,213,208,0.06) inset;
  --glow-blood:  0 0 24px rgba(226, 53, 72, 0.35), 0 0 64px rgba(139, 14, 28, 0.25);
  --glow-blood-soft: 0 0 32px rgba(139, 14, 28, 0.4);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-rite:  cubic-bezier(0.65, 0, 0.35, 1);  /* slow ceremonial */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-rite:   900ms;

  /* ============================================================
     TEXTURES & GRADIENTS
     ============================================================ */
  --grad-altar:    radial-gradient(ellipse at 50% 0%, rgba(139,14,28,0.25) 0%, transparent 60%), var(--void-900);
  --grad-veil:     linear-gradient(180deg, transparent 0%, rgba(5,3,4,0.85) 100%);
  --grad-clot:     linear-gradient(135deg, var(--blood-900) 0%, var(--blood-700) 50%, var(--blood-800) 100%);
  --grad-bone-fade: linear-gradient(180deg, var(--bone-100) 0%, var(--bone-300) 100%);
  --grain-overlay: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.02 0 0 0 0 0.03 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   GLOBAL ELEMENT DEFAULTS
   ============================================================ */
html { background: var(--bg); color: var(--fg-2); }
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: 400;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-4);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-4);
}

small, .caption {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

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

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--border-blood);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-bottom-color: var(--blood-300); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin: var(--space-6) 0;
}