/* Generated by website/make_holding_page.py from the design system: do not edit. */
/* ============================================================
   KING BEAR DESIGN SYSTEM — colors_and_type.css
   All design tokens as CSS custom properties
   ============================================================ */

/* ─── BASE COLOR PALETTE ─── */
:root {
  /* Purple — The Royal Cloak */
  --color-purple-900: oklch(20% 0.14 300);   /* #1E0B30 */
  --color-purple-800: #4A1A6B;               /* Deep Purple */
  --color-purple-700: #5C2280;
  --color-purple-600: #6B2D8B;               /* Royal Purple — primary */
  --color-purple-500: #8B45A8;
  --color-purple-400: #A86BC4;
  --color-purple-300: #C49DD8;
  --color-purple-200: #E0C8F0;
  --color-purple-100: #F4ECF9;

  /* Gold — The Crown */
  --color-gold-900: #5C3D00;
  --color-gold-800: #8A5C00;
  --color-gold-700: #D4860A;                 /* Warm Gold */
  --color-gold-600: #C9A227;                 /* Crown Gold — primary */
  --color-gold-500: #E0B830;
  --color-gold-400: #F0C040;                 /* Bright Gold */
  --color-gold-300: #F5D070;
  --color-gold-200: #FAE5A8;
  --color-gold-100: #FDF5DC;

  /* Bear Brown — The Fur */
  --color-bear-900: #3A1F08;
  --color-bear-800: #5C3215;
  --color-bear-700: #7A4520;
  --color-bear-600: #A0612A;                 /* Bear Brown — primary */
  --color-bear-500: #C47E3A;                 /* Bear Brown Light */
  --color-bear-400: #D9A060;
  --color-bear-300: #E8C090;
  --color-bear-200: #F2DCC0;
  --color-bear-100: #FAF0E0;

  /* Neutrals — Off-White & Charcoal */
  --color-neutral-950: #080808;
  --color-neutral-900: #141414;             /* Near Black — primary text */
  --color-neutral-800: #242424;
  --color-neutral-700: #3A3A3A;
  --color-neutral-600: #5C5C5C;             /* Mid Grey — secondary text */
  --color-neutral-500: #7A7A7A;
  --color-neutral-400: #A0A0A0;
  --color-neutral-300: #C2C2C2;
  --color-neutral-200: #DEDEDE;
  --color-neutral-150: #EBEBEB;
  --color-neutral-100: #F2F2F2;             /* Light grey — subtle bg */
  --color-neutral-50:  #F8F8F8;             /* Near White — page bg */
  --color-white:       #FFFFFF;

  /* ─── SEMANTIC / ALIAS COLORS ─── */

  /* Brand primaries */
  --brand-primary:          var(--color-purple-600);
  --brand-primary-dark:     var(--color-purple-800);
  --brand-primary-light:    var(--color-purple-300);
  --brand-accent:           var(--color-gold-600);
  --brand-accent-bright:    var(--color-gold-400);
  --brand-accent-dark:      var(--color-gold-700);
  --brand-bear:             var(--color-bear-600);
  --brand-bear-light:       var(--color-bear-500);

  /* Backgrounds */
  --bg-page:                var(--color-neutral-50);
  --bg-surface:             var(--color-white);
  --bg-surface-warm:        var(--color-neutral-100);
  --bg-dark:                var(--color-purple-800);
  --bg-darkest:             var(--color-purple-900);
  --bg-gold-tint:           var(--color-gold-100);

  /* Text */
  --text-primary:           var(--color-neutral-900);
  --text-secondary:         var(--color-neutral-600);
  --text-muted:             var(--color-neutral-400);
  --text-on-dark:           var(--color-neutral-100);
  --text-on-dark-secondary: var(--color-purple-300);
  --text-accent:            var(--color-gold-600);
  --text-accent-on-dark:    var(--color-gold-400);

  /* Borders */
  --border-subtle:          rgba(201, 162, 39, 0.2);
  --border-default:         rgba(201, 162, 39, 0.35);
  --border-strong:          var(--color-gold-600);
  --border-neutral:         var(--color-neutral-200);
  --border-dark:            rgba(242, 242, 242, 0.15);

  /* Interactive */
  --focus-ring:             var(--color-gold-600);
  --hover-overlay:          rgba(201, 162, 39, 0.08);
  --press-overlay:          rgba(28, 20, 16, 0.12);

  /* Status */
  --status-success:         #2D7A4A;
  --status-warning:         var(--color-gold-700);
  --status-error:           #C0392B;
  --status-info:            var(--color-purple-600);

  /* Crown gems — King Bear's circlet (CHARACTERS.md: reds, blues, greens). Added 2026-10-09 for the 3D model. */
  --color-gem-ruby:     #B3122E;
  --color-gem-sapphire: #1E4FB8;
  --color-gem-emerald:  #13875A;

  /* ─── NIGHT FRAME (added 2026-10-09, from the live site) ───
     The dark royal surround the book art sits in on kingbearstories.com.
     Derived from the palette with color-mix, so no new hex. Mirrors
     website/src/styles/global.css; change both together. */
  --night-0:      color-mix(in oklch, var(--color-purple-900) 30%, var(--color-neutral-950)); /* page */
  --night-1:      color-mix(in oklch, var(--color-purple-900) 55%, var(--color-neutral-950)); /* bands, nav */
  --night-2:      var(--color-purple-900);                                                    /* cards */
  --night-3:      color-mix(in oklch, var(--color-purple-800) 70%, var(--color-purple-900)); /* raised */
  --ink:          var(--color-bear-100);                                            /* text on night */
  --ink-soft:     color-mix(in oklch, var(--color-bear-100) 78%, transparent);      /* body copy */
  --ink-faint:    color-mix(in oklch, var(--color-bear-100) 58%, transparent);      /* captions */
  --line:         color-mix(in oklch, var(--color-bear-100) 12%, transparent);      /* hairlines */
  --line-gold:    color-mix(in oklch, var(--color-gold-400) 35%, transparent);      /* art frames */
  --glass:        color-mix(in oklch, var(--color-bear-100) 6%, transparent);
  --glow-purple:  color-mix(in oklch, var(--color-purple-400) 50%, transparent);
  --glow-gold:    color-mix(in oklch, var(--color-gold-400) 30%, transparent);
  --gold-text:    linear-gradient(180deg, var(--color-gold-200) 0%, var(--color-gold-500) 60%, var(--color-gold-600) 100%);
  --btn-royal:    linear-gradient(135deg, var(--color-purple-400) 0%, var(--color-purple-500) 45%, var(--color-purple-700) 100%);
  --radius-card:  20px;

  /* ─── SHADOWS ─── */
  --shadow-xs:    0 1px 3px rgba(28, 20, 16, 0.10);
  --shadow-sm:    0 2px 8px rgba(28, 20, 16, 0.15);
  --shadow-md:    0 4px 16px rgba(28, 20, 16, 0.20);
  --shadow-lg:    0 8px 32px rgba(28, 20, 16, 0.28);
  --shadow-xl:    0 16px 64px rgba(28, 20, 16, 0.35);
  --shadow-gold:  0 0 16px rgba(201, 162, 39, 0.40);
  --shadow-gold-lg: 0 0 32px rgba(201, 162, 39, 0.55);
  --shadow-purple: 0 4px 24px rgba(107, 45, 139, 0.35);

  /* ─── BORDER RADIUS ─── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  9999px;
  --radius-circle: 50%;

  /* ─── SPACING (8px base) ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─── TYPOGRAPHY ─── */

  /* Font families */
  --font-display:  'Josefin Sans', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-script:   'Caveat', cursive;
  --font-mono:     'Source Code Pro', 'Courier New', monospace;

  /* Font sizes — fluid scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   4.5rem;    /* 72px */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose:  2;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* ─── ANIMATION ─── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
}

/* ─── SEMANTIC ELEMENT STYLES ─── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}

code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-gold-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--brand-accent-dark);
}

blockquote, .blockquote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  border-left: 3px solid var(--brand-accent);
  padding-left: var(--space-6);
  margin-left: 0;
}

/* Script accent — use sparingly for emotive moments */
.script {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}

.script-purple { color: var(--brand-primary); }
.script-gold   { color: var(--brand-accent); }

/* Display / Hero variants */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
}

/* Gold text treatment */
.text-gold {
  color: var(--text-accent);
}

.text-gold-on-dark {
  color: var(--text-accent-on-dark);
}

.text-royal {
  color: var(--brand-primary);
}

/* Decorative crown divider */
.crown-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gold-600);
  font-size: 1.2em;
}

.crown-divider::before,
.crown-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-600), transparent);
}