/**
 * Local Reverb Design Tokens (V3 - Lead Round 3 Feedback)
 * Scope: 21+bgs.ID22 | Web Design, UX & Branding
 * Authority: Solera Branding Methodology (20.ID2210)
 * Context: Dark charcoal-slate system, heavy tactile grunge, Mustard CTA primary
 */

:root {
  /* ========================================================================
     1. COLOR SYSTEM: NEUTRALS & TONAL COLOR BLOCKS (Borderless Layout)
     ======================================================================== */
  
  /* Base page canvas: cool charcoal slate */
  --color-bg-base: #36363d;

  /* Tonal section block: darker plateau for contrast without borders */
  --color-block-dark: #25252b;

  /* Deepest near-black: logo centre tone, hard ink shadow, screenprint drops */
  --color-dark-deep: #0d0d0b;

  /* Tonal surface block: subtle wash without bounding borders */
  --color-block-surface: #2c2c33;

  /* Primary text: off-white from logo lettering (9.78:1 AAA vs base) */
  --color-text-primary: #e8e8e8;

  /* Secondary text: warm light stone (7.1:1 vs base) */
  --color-text-secondary: #b5b6ac;

  /* Muted text: metadata, hints, timestamps (4.48:1 vs base) */
  --color-text-muted: #9e9f95;


  /* ========================================================================
     2. COLOR SYSTEM: GRUNGE ACCENTS (Mustard Primary, Rust Secondary)
     ======================================================================== */

  /* Mustard Yellow (Primary Highlight & Primary CTA) */
  --color-accent-mustard: #dca32b;
  --color-accent-mustard-hover: #ebb33d;
  --color-accent-mustard-subtle: rgba(220, 163, 43, 0.18);
  --color-cta-primary: #dca32b;
  --color-cta-primary-hover: #ebb33d;
  --color-cta-primary-text: #0d0d0b; /* 7.67:1 AAA contrast */
  --color-highlight: #dca32b;

  /* Rust / Iron Oxide (Secondary CTA & Warm Anchor) */
  --color-accent-rust: #c86432;
  --color-accent-rust-hover: #d97441;
  --color-accent-rust-subtle: rgba(200, 100, 50, 0.18);
  --color-cta-secondary: #c86432;
  --color-cta-secondary-hover: #d97441;
  --color-cta-secondary-text: #0d0d0b; /* 4.93:1 AA contrast */

  /* Patina Teal / Verdigris (Tertiary Action & QR Accent) */
  --color-accent-patina: #3ea399;
  --color-accent-patina-hover: #49b5ab;
  --color-accent-patina-subtle: rgba(62, 163, 153, 0.2);
  --color-accent-patina-text: #6cd2c8; /* 6.67:1 AA vs Charcoal */

  /* Oxblood / Deep Crimson (Alerts, Destructive, Negative Feedback Tags) */
  --color-accent-oxblood: #96383c;
  --color-accent-oxblood-hover: #a84549;
  --color-accent-oxblood-subtle: rgba(150, 56, 60, 0.22);
  --color-accent-oxblood-text: #e58a8e; /* 4.77:1 AA vs Charcoal */

  /* Moss / Lichen Green (Success, Verified Badges, Active Dots) */
  --color-accent-moss: #6e8b52;
  --color-accent-moss-hover: #7d9d5f;
  --color-accent-moss-subtle: rgba(110, 139, 82, 0.2);
  --color-accent-moss-text: #a3c683; /* 6.26:1 AA vs Charcoal */

  /* Faded Denim / Slate Blue (Quiet Chips, Secondary Actions) */
  --color-accent-denim: #5b82a6;
  --color-accent-denim-hover: #6992b8;
  --color-accent-denim-subtle: rgba(91, 130, 166, 0.2);
  --color-accent-denim-text: #8ebce3; /* 5.97:1 AA vs Charcoal */

  /* Bruised Plum / Mulberry (Category Tags, Tertiary Accents) */
  --color-accent-plum: #8a5274;
  --color-accent-plum-hover: #9b6084;
  --color-accent-plum-subtle: rgba(138, 82, 116, 0.2);
  --color-accent-plum-text: #d09ebf; /* 5.32:1 AA vs Charcoal */


  /* ========================================================================
     3. TYPOGRAPHY: APPROVED PAIRING (Old Standard TT + Work Sans)
     ======================================================================== */

  /* Headings: Old Standard TT (high-contrast modern serif) */
  --font-family-heading: 'Old Standard TT', Georgia, 'Times New Roman', serif;

  /* Body: Work Sans (early 20th-century commercial foundry grotesque) */
  --font-family-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Monospace for code, stamps, technical tokens */
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Modular fluid type scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-base: 1.55;
  --line-height-relaxed: 1.7;

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


  /* ========================================================================
     4. TACTILE GRUNGE: UNEVEN EDGES, STAMPS & SCREENPRINT SHADOWS
     ======================================================================== */

  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Heavy Physical Screenprint Drop Shadows */
  --shadow-screenprint: 4px 4px 0px var(--color-dark-deep);
  --shadow-screenprint-lg: 7px 7px 0px var(--color-dark-deep);
  --shadow-screenprint-card: 6px 6px 0px rgba(13, 13, 11, 0.95);

  /* Uneven Hand-Cut Woodblock Clip-Path */
  --clip-woodblock: polygon(0% 1px, 18% 0px, 35% 1.5px, 52% 0px, 70% 1.5px, 86% 0px, 100% 1px, 99.5% 48%, 100% 98.5%, 85% 100%, 68% 98.5%, 50% 100%, 32% 98.5%, 15% 100%, 0% 99%, 0.5% 52%);
  --clip-card-torn: polygon(0% 0%, 100% 0%, 100% calc(100% - 4px), 94% 100%, 88% calc(100% - 3px), 82% 100%, 75% calc(100% - 2px), 68% 100%, 62% calc(100% - 4px), 55% 100%, 48% calc(100% - 3px), 42% 100%, 35% calc(100% - 2px), 28% 100%, 22% calc(100% - 4px), 15% 100%, 8% calc(100% - 3px), 0% calc(100% - 4px));

  --radius-raw: 1px;
}