/**
 * oojinja Design System — CSS Variables
 * 3-6-9 Edition: Spacing, rhythm, and structure derive from triadic families
 */

:root {
  /* ═══════════════════════════════════════════════════════════
     ACCENT COLORS
     Single source: feeds SVG stroke + e-Omamori border
     ═══════════════════════════════════════════════════════════ */
  --accent-primary: #8B2942;
  --accent-secondary: #C9A959;

  /* SVG-specific (inherit from accent) */
  --svg-stroke: var(--accent-primary);
  --svg-fill: transparent;
  --svg-opacity: 0.12;

  /* ═══════════════════════════════════════════════════════════
     BASE UNIT: 12px
     Chosen because 12 is divisible by 3, 6, and yields clean
     multiples: 36, 72, 108, etc.
     ═══════════════════════════════════════════════════════════ */
  --unit: 12px;

  /* ═══════════════════════════════════════════════════════════
     3-6-9 SPACING SCALE
     All layout spacing restricted to these tokens
     ═══════════════════════════════════════════════════════════ */
  --space-3: calc(var(--unit) * 3);   /* 36px */
  --space-6: calc(var(--unit) * 6);   /* 72px */
  --space-9: calc(var(--unit) * 9);   /* 108px */

  /* Sub-units for fine adjustments (still 3-based) */
  --space-1: var(--unit);             /* 12px (base) */
  --space-2: calc(var(--unit) * 1.5); /* 18px (half of 3) */

  /* Large spacing (multiples of 9) */
  --space-12: calc(var(--unit) * 12); /* 144px (9 + 3) */
  --space-18: calc(var(--unit) * 18); /* 216px (9 × 2) */

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY RHYTHM
     Line height creates vertical rhythm SVG aligns to
     Base: 18px font × 2 = 36px rhythm (divisible by 3, 6, 9)
     ═══════════════════════════════════════════════════════════ */
  --font-base: 18px;
  --line-height: 2;                   /* 18 × 2 = 36px rhythm */
  --rhythm: calc(var(--font-base) * var(--line-height)); /* 36px */

  /* Type scale (ratio ~1.333, adjusted for 3-divisibility where sensible) */
  --text-xs: 12px;
  --text-sm: 15px;
  --text-base: 18px;
  --text-lg: 21px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 45px;
  --text-5xl: 54px;                   /* 54 = 6 × 9 */

  /* ═══════════════════════════════════════════════════════════
     3-TIER OPACITY SYSTEM
     Matches generator: low / mid / high
     ═══════════════════════════════════════════════════════════ */
  --opacity-low: 0.06;
  --opacity-mid: 0.12;
  --opacity-high: 0.18;

  /* ═══════════════════════════════════════════════════════════
     3-TIER STROKE WIDTHS
     ═══════════════════════════════════════════════════════════ */
  --stroke-light: 0.5px;
  --stroke-mid: 1px;
  --stroke-heavy: 1.5px;

  /* ═══════════════════════════════════════════════════════════
     HERO DIMENSIONS
     Aspect ratio and grid unit align to 36px rhythm
     ═══════════════════════════════════════════════════════════ */
  --hero-aspect: 21 / 9;              /* 21 and 9 both in 3-family */
  --hero-max-height: 396px;           /* 396 = 36 × 11 (close to 400, rhythm-aligned) */
  --hero-grid-unit: 36;               /* Matches --rhythm for SVG viewBox */

  /* ═══════════════════════════════════════════════════════════
     SURFACE COLORS
     ═══════════════════════════════════════════════════════════ */
  --bg-page: #FCFCFA;
  --bg-card: #FFFFFF;
  --bg-muted: #F5F5F3;

  --text-primary: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #8C8C8C;

  --border-light: #E8E8E6;
  --border-dashed: var(--accent-primary);

  /* ═══════════════════════════════════════════════════════════
     E-OMAMORI CARD
     Inherits accent for cohesion with hero SVG
     ═══════════════════════════════════════════════════════════ */
  --omamori-border: var(--accent-primary);
  --omamori-bg: var(--bg-card);
  --omamori-icon-color: var(--accent-primary);

  /* ═══════════════════════════════════════════════════════════
     ANIMATION CADENCE (if used)
     3-step: appear / settle / rest = 1800ms total
     ═══════════════════════════════════════════════════════════ */
  --anim-appear: 300ms;
  --anim-settle: 600ms;
  --anim-rest: 900ms;
  --anim-total: 1800ms;               /* 1800 = 3 × 600 = 9 × 200 */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #0D0D0D;
    --bg-card: #1A1A1A;
    --bg-muted: #262626;
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-muted: #6C6C6C;
    --border-light: #333333;
    --opacity-low: 0.09;
    --opacity-mid: 0.15;
    --opacity-high: 0.21;
  }
}