/**
 * Kabod Crest Limited - Design Tokens
 * Source of Truth: kabod-crest-brand skill & brand guidelines
 * Brand Territory: Quiet Authority (refined, credible, purposeful, premium, modern, African)
 */

:root {
  /* Color Palette - Warm-Editorial & Brand Constants */
  --color-obsidian: #141215;        /* 40% - Deep printer's ink charcoal (softened from stark black) */
  --color-plum: #321A4A;            /* 25% - Primary identity colour (dominant, royal heritage) */
  --color-plum-deep: #1E0F2D;       /* Deep Plum for high-contrast dark accents */
  --color-plum-hover: #452467;      /* Interactive hover state for plum elements */
  --color-gold: #C8A45D;            /* 20% - Accent ONLY: dividers, icons, CTA highlights */
  --color-gold-hover: #D8B775;      /* Gold hover highlight */
  --color-gold-tint: rgba(200, 164, 93, 0.12); /* Subtle gold background tint */
  --color-gold-border: rgba(200, 164, 93, 0.35); /* Subtle gold framing */
  --color-ivory: #F7F4EC;           /* Base warm unbleached paper / cream canvas */
  --color-ivory-warm: #EFE8DB;      /* Warm tactile flax / soft beige for container contrast */
  --color-ivory-surface: #FAF6EE;   /* Soft paper sheet tone for cards */
  --color-paper-pure: #FCFAF6;      /* Fine deckle paper surface replacing clinical pure white */
  --color-paper-flax: #F2ECE0;      /* Tactile flax for secondary strips and metadata panels */
  --color-stone: #B8B1A5;           /* Secondary neutral: structural borders and lines */
  --color-stone-muted: rgba(184, 177, 165, 0.35); /* Transparent stone dividers */
  --color-white: #FCFAF6;           /* Soft unbleached paper replacing #FFFFFF globally */

  /* Typography Colors - Deep Ink & Warm Charcoal (WCAG AAA/AA Compliant) */
  --color-text-dark: #181517;       /* Deep printer's ink for primary literary headlines */
  --color-text-muted: #3E3832;      /* Warm rich charcoal for body copy, specs, and descriptions */
  --color-text-subtle: #686056;     /* Warm grey/sepia tone for editorial metadata and form labels */
  --color-text-light: #FAF7F2;      /* Crisp warm ivory for dark ink/plum surfaces */
  --color-text-light-muted: #D8D1C3;/* High-contrast readable stone for secondary text on dark surfaces */

  /* Typography Families */
  --font-structural: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing Scale - Intentional Editorial Negative Space */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 108px;

  /* Layout */
  --container-max-width: 1240px;
  --header-height: 72px;
  --banner-height: 0px;

  /* Letterpress Proportions - Refined placard geometry */
  --radius-xs: 3px;                 /* Micro indicators and subtle badges */
  --radius-badge: 4px;              /* Status pills and small tags */
  --radius-subtle: 6px;             /* Inputs, selects, textareas, small controls */
  --radius-btn: 6px;                /* Buttons and interactive action links */
  --radius-card-sm: 6px;            /* Thumbnails, tabs, sub-cards, accordion headers */
  --radius-card: 8px;               /* Standard cards, matrix tiles, containers */
  --radius-card-lg: 12px;           /* Featured hero visual cards, large panels */
  --radius-modal: 14px;             /* Modals, drawers, high-level floating surfaces */
  --radius-pill: 9999px;            /* Category filter pills, rounded counters */

  /* Architectural Hairlines & Borders - Thin, crisp 0.5px to 1px ink rules */
  --border-hairline: 1px solid rgba(50, 26, 74, 0.12);
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.08);
  --border-gold-subtle: 1px solid rgba(200, 164, 93, 0.28);
  --border-ink-crisp: 1px solid rgba(24, 21, 23, 0.12);
  --border-ink-subtle: 0.5px solid rgba(24, 21, 23, 0.16);
  --border-gold-rule: 1px solid rgba(200, 164, 93, 0.38);
  --border-double-rule: double 3px rgba(200, 164, 93, 0.45);

  /* Elevation Shadows - Tactile, crisp architectural depth without muddy blur */
  --shadow-sm: 0 1px 4px rgba(24, 21, 23, 0.04);
  --shadow-card: 0 2px 10px rgba(24, 21, 23, 0.05);
  --shadow-hover: 0 6px 20px rgba(50, 26, 74, 0.09);

  /* Transitions - Disciplined and subtle */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}