/* =========================================================================
   KLUSĀ REVOLŪCIJA — Tokens
   "Black is the stage. Gold is the light."

   All three families ship locally from fonts/ — no Google Fonts required.
   Inter is provided in three optical sizes:
     - 'Inter'           (18pt — UI body, inputs, forms)
     - 'Inter Reading'   (24pt — reading-room long-form body)
     - 'Inter Display'   (28pt — rare, for large Inter titles if ever needed)
   ========================================================================= */

/* ---- Cinzel (display) ---- */
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Bebas Neue (markers / buttons / nav) ---- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Inter — 18pt optical (UI body) ---- */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Inter Reading — 24pt optical (reading-room body) ---- */
@font-face {
  font-family: 'Inter Reading';
  src: url('/fonts/Inter-Reading-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Reading';
  src: url('/fonts/Inter-Reading-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Reading';
  src: url('/fonts/Inter-Reading-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Inter Display — 28pt optical (rare; large Inter display) ---- */
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter-Display-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter-Display-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter-Display-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* -------- Color: surfaces (strict — never bright white) -------- */
  --kr-black:           #000000;   /* sanctuary background                  */
  --kr-charcoal:        #0A0A0A;   /* reading-room background               */
  --kr-surface-1:       #111111;   /* cards, secondary panels               */
  --kr-surface-2:       #1A1A1A;   /* subtle borders, dividers              */
  --kr-surface-3:       #2A2A2A;   /* hover fills, emphasized borders       */

  /* -------- Color: gold spectrum (the only accent family) -------- */
  --kr-gold:            #C4A265;   /* warm gold — ALL accents, primary text */
  --kr-gold-muted:      #8A7550;   /* secondary text, author names          */
  --kr-gold-deep:       #6B5846;   /* year markers, tertiary details        */

  /* -------- Color: reading text -------- */
  --kr-warm-white:      #E8E4DE;   /* body reading — NEVER pure #FFFFFF     */

  /* -------- Semantic tokens -------- */
  --kr-bg:              var(--kr-black);
  --kr-bg-reading:      var(--kr-charcoal);
  --kr-bg-panel:        var(--kr-surface-1);
  --kr-border:          var(--kr-surface-2);
  --kr-border-strong:   var(--kr-surface-3);
  --kr-border-gold:     rgba(196, 162, 101, 0.35);  /* 0.5–1px gold hairlines */

  --kr-fg:              var(--kr-gold);          /* primary UI text         */
  --kr-fg-muted:        var(--kr-gold-muted);    /* secondary               */
  --kr-fg-deep:         var(--kr-gold-deep);     /* tertiary / year markers */
  --kr-fg-reading:      var(--kr-warm-white);    /* long-form body text     */

  /* -------- Jewel tones — COVER MANDALA ONLY. Do not use in UI. -------- */
  --kr-jewel-blue:      #3D8DFF;
  --kr-jewel-cyan:      #5FD4E6;
  --kr-jewel-magenta:   #D84C9B;
  --kr-jewel-violet:    #8B5FD8;
  --kr-jewel-orange:    #E87A3D;
  --kr-jewel-gold:      #F0C14A;

  /* -------- Typography — families -------- */
  --kr-font-display:    "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --kr-font-marker:     "Bebas Neue", "Oswald", "Impact", sans-serif;
  --kr-font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* -------- Typography — sizes (two scales: UI and Reading) -------- */
  --kr-size-marker-xs:  10px;      /* year stamp                             */
  --kr-size-marker-sm:  12px;      /* nav labels                             */
  --kr-size-button:     13px;      /* primary CTA                            */
  --kr-size-marker-md:  14px;      /* section markers                        */

  --kr-size-body-sm:    15px;      /* UI body                                */
  --kr-size-body:       17px;      /* UI body large                          */
  --kr-size-reading:    19px;      /* reading-room long-form                 */
  --kr-size-reading-lg: 20px;      /* reading-room, generous                 */

  --kr-size-display-sm: 28px;      /* small titles                           */
  --kr-size-display:    40px;      /* section titles                         */
  --kr-size-display-lg: 56px;      /* page titles                            */
  --kr-size-display-xl: 84px;      /* sanctuary hero                         */

  /* -------- Typography — letter-spacing (signature of the brand) -------- */
  --kr-tracking-display:        0.18em;  /* Cinzel titles — min             */
  --kr-tracking-display-wide:   0.22em;  /* Cinzel titles — max             */
  --kr-tracking-marker:         0.25em;  /* Bebas markers / buttons         */
  --kr-tracking-marker-wide:    0.35em;  /* Bebas secondary labels          */
  --kr-tracking-year:           0.45em;  /* year stamp — widest             */
  --kr-tracking-body:           0.01em;  /* Inter reading                   */

  /* -------- Typography — line-heights -------- */
  --kr-leading-display:  1.15;
  --kr-leading-ui:       1.35;
  --kr-leading-body:     1.6;
  --kr-leading-reading:  1.8;      /* long-form manuscript                   */

  /* -------- Typography — weights -------- */
  --kr-weight-display:   400;
  --kr-weight-display-b: 500;
  --kr-weight-display-h: 600;
  --kr-weight-body:      400;
  --kr-weight-body-em:   500;

  /* -------- Geometry — sharp everything -------- */
  --kr-radius-none:     0px;
  --kr-radius-sm:       1px;       /* default                                */
  --kr-radius-md:       2px;       /* maximum allowed                        */

  /* -------- Borders — hairlines -------- */
  --kr-border-width:      0.5px;
  --kr-border-width-hard: 1px;

  /* -------- Spacing — quiet, generous -------- */
  --kr-space-1:   4px;
  --kr-space-2:   8px;
  --kr-space-3:   14px;
  --kr-space-4:   24px;
  --kr-space-5:   36px;
  --kr-space-6:   56px;
  --kr-space-7:   88px;
  --kr-space-8:   140px;
  --kr-space-9:   220px;

  /* -------- Motion — slow, never bouncy -------- */
  --kr-ease:           cubic-bezier(0.45, 0, 0.25, 1);  /* ease-in-out       */
  --kr-duration-fast:  400ms;
  --kr-duration:       500ms;
  --kr-duration-slow:  600ms;
  --kr-transition:     all var(--kr-duration) var(--kr-ease);

  /* -------- Layout -------- */
  --kr-reading-measure: 680px;     /* manuscript column max-width            */
  --kr-ui-measure:      1120px;    /* shop / general UI max-width            */

  /* -------- No shadows, no gradients. Intentionally omitted. --------
     The brand forbids drop shadows, neon, blur, glows, and gradients on UI.
     The single exception (radial gold glow behind the mandala) lives inside
     the cover SVG — not as a token. Do not re-introduce shadow vars. */
}

/* =========================================================================
   Base element styles — semantic defaults
   ========================================================================= */

html, body {
  background: var(--kr-bg);
  color: var(--kr-fg);
  font-family: var(--kr-font-body);
  font-size: var(--kr-size-body-sm);
  line-height: var(--kr-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display titles — Cinzel, uppercase, wide tracking, warm gold */
h1, .kr-h1 {
  font-family: var(--kr-font-display);
  font-weight: var(--kr-weight-display);
  font-size: var(--kr-size-display-lg);
  line-height: var(--kr-leading-display);
  letter-spacing: var(--kr-tracking-display-wide);
  text-transform: uppercase;
  color: var(--kr-gold);
  margin: 0;
}

h2, .kr-h2 {
  font-family: var(--kr-font-display);
  font-weight: var(--kr-weight-display);
  font-size: var(--kr-size-display);
  line-height: var(--kr-leading-display);
  letter-spacing: var(--kr-tracking-display);
  text-transform: uppercase;
  color: var(--kr-gold);
  margin: 0;
}

h3, .kr-h3 {
  font-family: var(--kr-font-display);
  font-weight: var(--kr-weight-display);
  font-size: var(--kr-size-display-sm);
  line-height: var(--kr-leading-display);
  letter-spacing: var(--kr-tracking-display);
  text-transform: uppercase;
  color: var(--kr-gold);
  margin: 0;
}

/* Section / nav markers — Bebas Neue */
.kr-marker {
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-marker-md);
  letter-spacing: var(--kr-tracking-marker);
  text-transform: uppercase;
  color: var(--kr-gold);
}

.kr-marker-sm {
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-marker-sm);
  letter-spacing: var(--kr-tracking-marker-wide);
  text-transform: uppercase;
  color: var(--kr-gold-muted);
}

/* Year stamp — the signature footer mark
   Format: "MMXXVI · PRIVĀTS IZDEVUMS" */
.kr-year-stamp {
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-marker-xs);
  letter-spacing: var(--kr-tracking-year);
  text-transform: uppercase;
  color: var(--kr-gold-deep);
  text-align: center;
}

/* Author name — Bebas, muted gold */
.kr-author {
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-marker-sm);
  letter-spacing: var(--kr-tracking-marker-wide);
  text-transform: uppercase;
  color: var(--kr-gold-muted);
}

/* Body reading — Inter, warm white, generous leading */
p, .kr-body {
  font-family: var(--kr-font-body);
  font-size: var(--kr-size-body);
  line-height: var(--kr-leading-body);
  font-weight: var(--kr-weight-body);
  color: var(--kr-fg-reading);
  margin: 0 0 1.1em 0;
}

.kr-reading {
  font-family: var(--kr-font-body);
  font-size: var(--kr-size-reading);
  line-height: var(--kr-leading-reading);
  font-weight: var(--kr-weight-body);
  color: var(--kr-warm-white);
}

.kr-reading-lg {
  font-size: var(--kr-size-reading-lg);
}

strong, .kr-em {
  font-weight: var(--kr-weight-body-em);
  color: var(--kr-warm-white);
}

/* Links — gold, underline on hover only, 400ms fade */
a, .kr-link {
  color: var(--kr-gold);
  text-decoration: none;
  transition: opacity var(--kr-duration) var(--kr-ease),
              color   var(--kr-duration) var(--kr-ease);
}
a:hover, .kr-link:hover { opacity: 0.7; }

/* Primary CTA — bordered, fills on hover */
.kr-btn {
  display: inline-block;
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-button);
  letter-spacing: var(--kr-tracking-marker);
  text-transform: uppercase;
  color: var(--kr-gold);
  background: transparent;
  border: var(--kr-border-width) solid var(--kr-gold);
  border-radius: var(--kr-radius-sm);
  padding: 14px 36px;
  cursor: pointer;
  transition: background var(--kr-duration-fast) var(--kr-ease),
              color      var(--kr-duration-fast) var(--kr-ease);
  text-align: center;
  text-decoration: none;
}
.kr-btn:hover {
  background: var(--kr-gold);
  color: var(--kr-black);
  opacity: 1;
}

/* Secondary ghost button — hairline, muted */
.kr-btn-ghost {
  display: inline-block;
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-button);
  letter-spacing: var(--kr-tracking-marker);
  text-transform: uppercase;
  color: var(--kr-gold-muted);
  background: transparent;
  border: var(--kr-border-width) solid var(--kr-border);
  border-radius: var(--kr-radius-sm);
  padding: 14px 36px;
  cursor: pointer;
  transition: var(--kr-transition);
}
.kr-btn-ghost:hover {
  color: var(--kr-gold);
  border-color: var(--kr-border-gold);
}

/* Primary CTA — filled variant. Solid gold base, black text.
   Used when the primary action wants stronger visual weight than the
   outlined .kr-btn (e.g. the sanctuary's IEGŪT PIEKĻUVI button).
   Documented in preview/component-buttons.html as `.btn-filled`;
   this codifies it into the brand stylesheet. */
.kr-btn-filled {
  display: inline-block;
  font-family: var(--kr-font-marker);
  font-size: var(--kr-size-button);
  letter-spacing: var(--kr-tracking-marker);
  text-transform: uppercase;
  color: var(--kr-black);
  background: var(--kr-gold);
  border: var(--kr-border-width) solid var(--kr-gold);
  border-radius: var(--kr-radius-sm);
  padding: 14px 36px;
  cursor: pointer;
  transition: background   var(--kr-duration-fast) var(--kr-ease),
              border-color var(--kr-duration-fast) var(--kr-ease);
  text-align: center;
  text-decoration: none;
}
.kr-btn-filled:hover {
  /* Slightly brighter gold on hover. Explicit opacity: 1 to neutralize
     the global a:hover { opacity: 0.7 } from the link-styles block. */
  background: #D4B27A;
  border-color: #D4B27A;
  color: var(--kr-black);
  opacity: 1;
}

/* Input field — hairline border, no fill, no shadow */
.kr-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--kr-border-width) solid var(--kr-border-strong);
  color: var(--kr-warm-white);
  font-family: var(--kr-font-body);
  font-size: var(--kr-size-body);
  padding: 14px 0;
  letter-spacing: var(--kr-tracking-body);
  transition: border-color var(--kr-duration) var(--kr-ease);
  outline: none;
}
.kr-input::placeholder {
  color: var(--kr-gold-deep);
  font-family: var(--kr-font-marker);
  letter-spacing: var(--kr-tracking-marker);
  text-transform: uppercase;
  font-size: var(--kr-size-marker-sm);
}
.kr-input:focus { border-bottom-color: var(--kr-gold); }

/* Divider — thin gold hairline, often with a center gap */
.kr-rule {
  border: none;
  border-top: var(--kr-border-width) solid var(--kr-border-gold);
  margin: var(--kr-space-5) 0;
}

/* A short centered gold tick used between title and author */
.kr-tick {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--kr-gold);
  margin: var(--kr-space-4) auto;
}

::selection { background: var(--kr-gold); color: var(--kr-black); }

/* Utility: forbid any accidental pure white */
.kr-never-white { color: var(--kr-warm-white); }