/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Color Palette - Parchment Theme (Extended Scale) */
  --parchment-50: #fdfbf7;    /* Brightest highlights */
  --parchment-100: #f9f6ed;   /* Subtle backgrounds */
  --parchment-200: #f4ecd8;   /* Light (legacy --parchment-light) */
  --parchment-300: #e8dcc4;   /* Base (legacy --parchment-base) */
  --parchment-400: #d4c4a8;   /* Dark (legacy --parchment-dark) */
  --parchment-500: #c0b090;   /* Borders, dividers */
  --parchment-600: #a89a7a;   /* Subtle text */
  --parchment-700: #8a7d5f;   /* Muted text */

  /* Legacy color names (for backwards compatibility) */
  --parchment-light: var(--parchment-200);
  --parchment-base: var(--parchment-300);
  --parchment-dark: var(--parchment-400);

  /* Warm Grey Scale (Extended) */
  --grey-50: #f5f4f3;
  --grey-100: #eae7e4;
  --grey-200: #d6d0ca;
  --grey-300: #b8aea6;
  --grey-400: #9a8d82;
  --grey-500: #7a6f68;  /* Legacy warm-grey-light */
  --grey-600: #5a5550;  /* Legacy warm-grey */
  --grey-700: #4a4540;  /* Legacy warm-grey-dark */
  --grey-800: #3a3530;
  --grey-900: #2a2520;

  /* Legacy grey names (for backwards compatibility) */
  --warm-grey-light: var(--grey-500);
  --warm-grey: var(--grey-600);
  --warm-grey-dark: var(--grey-700);

  /* Overlay & Shadow Colors */
  --overlay-warm-grey-dark: rgba(74, 69, 64, 0.5);
  --shadow-warm-grey-dark-heavy: rgba(74, 69, 64, 0.3);
  --shadow-warm-grey-dark-light: rgba(74, 69, 64, 0.15);
  --shadow-black-light: rgba(0, 0, 0, 0.1);
  --shadow-black-medium: rgba(0, 0, 0, 0.15);
  --shadow-black-heavy: rgba(0, 0, 0, 0.25);
  --shadow-black-strong: rgba(0, 0, 0, 0.35);

  /* Semantic Colors - Medieval Illumination Inspired */
  --color-primary: #8b4513;      /* Rich brown (can be overridden by campaign) */
  --color-secondary: #6b5028;
  --color-accent: #c19350;       /* Gold accent */
  --color-success: #5a7a4a;      /* Forest green */
  --color-warning: #d4a43a;      /* Amber */
  --color-error: #a03535;        /* Deep red */
  --color-info: #4a6c8f;         /* Steel blue */
  --color-link: #2c5aa0;
  --color-link-hover: #1e4077;

  /* Legacy semantic colors */
  --danger: var(--color-error);

  /* Eldritch Horror Theme - Deep sea / cosmic horror colors */
  --eldritch-void: #0a0d0a;
  --eldritch-deep: #0f1a16;
  --eldritch-dark: #142822;
  --eldritch-medium: #1a3d33;
  --eldritch-glow: #2d5a4a;
  --eldritch-highlight: #3d7a66;
  --eldritch-accent: #0f8;
  --eldritch-text: #c4e0d4;
  --eldritch-text-dim: #6a8a7a;
  --eldritch-text-bright: #e8fff3;
  --tentacle-purple: #4a2a5c;
  --blood-dark: #4a1a1a;
  --eye-glow: #8f4;
  --void-purple: #2d1a3d;

  /* Typography */
  --font-heading: 'Cinzel', serif;
  --font-body: 'Crimson Text', serif;
  --font-ui: 'Lato', sans-serif;

  /* Typographic Scale (1.5x - Perfect Fourth) - Base 18px */
  --text-xs: 0.694rem;    /* 12.5px - Captions, metadata */
  --text-sm: 0.833rem;    /* 15px - Small labels */
  --text-base: 1rem;      /* 18px - Body text */
  --text-md: 1.2rem;      /* 21.6px - Lead paragraphs */
  --text-lg: 1.44rem;     /* 25.9px - H4 */
  --text-xl: 1.728rem;    /* 31.1px - H3 */
  --text-2xl: 2.074rem;   /* 37.3px - H2 */
  --text-3xl: 2.488rem;   /* 44.8px - H1 */
  --text-4xl: 2.986rem;   /* 53.7px - Page titles */
  --text-5xl: 3.583rem;   /* 64.5px - Hero */

  /* Line Heights */
  --line-height-tight: 1.1;   /* For headings */
  --line-height-normal: 1.4;  /* For UI elements */
  --line-height-relaxed: 1.6; /* For body text */
  --line-height-loose: 1.8;   /* For long-form content */

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Elevation System - Creates Z-Axis Hierarchy */
  --shadow-sm:
    0 1px 2px rgba(74, 69, 64, 0.08),
    0 1px 4px rgba(74, 69, 64, 0.04);
  --shadow-md:
    0 2px 4px rgba(74, 69, 64, 0.08),
    0 4px 8px rgba(74, 69, 64, 0.06);
  --shadow-lg:
    0 4px 8px rgba(74, 69, 64, 0.10),
    0 8px 16px rgba(74, 69, 64, 0.08);
  --shadow-xl:
    0 8px 16px rgba(74, 69, 64, 0.12),
    0 16px 32px rgba(74, 69, 64, 0.10);

  /* Special Shadows */
  --shadow-inset: inset 0 2px 4px rgba(74, 69, 64, 0.10);
  --shadow-glow: 0 0 20px rgba(193, 147, 80, 0.3);

  /* Animation tokens */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;
  --transition-slower: 0.5s;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Responsive Breakpoints
   *
   * NOTE: CSS custom properties cannot be used directly in @media queries
   * (they are runtime values, media queries are parse-time).
   * These values serve as documentation and reference.
   * All media queries in the codebase should use these exact pixel values
   * with inline comments for maintainability.
   *
   * Example: @media (max-width: 768px) [comment: tablet] { }
   */
  --breakpoint-mobile: 480px;     /* Small phones */
  --breakpoint-phablet: 640px;    /* Large phones */
  --breakpoint-tablet: 768px;     /* Tablets */
  --breakpoint-desktop: 900px;    /* Small desktops */
  --breakpoint-wide: 1024px;      /* Wide desktops */
}