/**
 * Classic template — Design tokens (CSS)
 *
 * Source of truth for the Classic visual palette. Applied via the
 * [data-yga-template="classic"] wrapper rendered by TemplateThemeProvider.
 * Loaded by guest/layout.tsx only when the Classic template is active.
 *
 * Design identity: warm cream surfaces, Cormorant Garamond display font,
 *   terracotta/warm-amber primary accent, sage-green for success/confirmation,
 *   12px radius, rounded cards.
 *
 * HSL values aligned to the Classic prototype (docs/prototypes/classic/styles/tokens.css).
 * All hex values from the prototype have been converted to HSL triplets.
 * Default mode: light.
 */

/* ── Light mode (default) ──────────────────────────────────────────────── */
[data-yga-template="classic"] {
  /* Surface — prototype --bg / --bg-elevated / --bg-sunken / --bg-tint */
  --background:           33 47% 96%;   /* #FAF6F1 warm cream (prototype --bg) */
  --foreground:           34 8% 16%;    /* #2D2A26 dark warm (prototype --fg) */
  --card:                 0 0% 100%;   /* #FFFFFF (prototype --bg-elevated) */
  --card-foreground:      34 8% 16%;
  --popover:              0 0% 100%;
  --popover-foreground:   34 8% 16%;

  /* Muted / secondary — prototype --bg-sunken / --fg-muted */
  --muted:                33 41% 91%;   /* #F2EBE0 (prototype --bg-sunken) */
  --muted-foreground:     33 8% 39%;    /* #6B655C (prototype --fg-muted) */
  --secondary:            33 41% 91%;
  --secondary-foreground: 34 8% 16%;

  /* Accent — sage green (prototype --accent, used for success/confirmation discs) */
  --accent:               138 7% 51%;   /* #7A8B7F sage green (prototype --accent, warmer hue) */
  --accent-foreground:    0 0% 100%;

  /* Warm off-white tint surface (prototype --bg-tint) */
  --accent-tint:          33 51% 93%;   /* #F6EFE3 (prototype --bg-tint) */
  --accent-tint-foreground: 34 8% 16%;

  /* Pale-sage soft surface — calm disc behind sage accent icons (prototype --accent-soft) */
  --accent-soft:          84 19% 89%;   /* #E5E9DF warm yellow-green pale (prototype --accent-soft) */

  /* Primary — terracotta CTA accent (prototype --primary) */
  --primary:              17 40% 54%;   /* #B8755A muted terracotta (prototype --primary) */
  --primary-foreground:   0 0% 100%;    /* #FFFFFF (prototype --primary-fg) */
  --primary-hover:        17 37% 47%;   /* #A4644B (prototype --primary-hover) */
  --primary-rgb:          184 117 90;   /* #B8755A (prototype --primary-rgb) */
  --ring:                 17 40% 54%;
  --destructive:          0 51% 53%;    /* #C44848 (prototype --destructive, less saturated) */
  --destructive-foreground: 0 0% 98%;

  /* Borders — prototype --border / --border-strong */
  --border:               33 32% 85%;   /* #E5DCCC (prototype --border) */
  --border-strong:        36 36% 75%;   /* #D6C5A8 (prototype --border-strong) */
  --input:                33 32% 85%;

  /* Extras */
  --fg-subtle:            33 8% 54%;    /* #948C81 (prototype --fg-subtle) */
  --gold:                 37 41% 61%;   /* #C4A574 (prototype --gold, less saturated) */
  --gold-soft:            36 100% 96%;
  --primary-soft:         24 54% 88%;   /* #F1DDD0 (prototype --primary-soft, pale peach) */
  --success:              123 20% 45%;  /* #5C8A5E (prototype --success) */
  --success-soft:         112 25% 90%;  /* #E1ECDF (prototype --success-soft, warm yellow-green) */
  --destructive-soft:     7 71% 92%;    /* #F7E2DE (prototype --destructive-soft) */

  /* Warm-tinted shadows (prototype --shadow-sm/md/lg) */
  --shadow-warm-sm:       0 1px 2px rgba(45,42,38,0.06), 0 1px 1px rgba(45,42,38,0.04);
  --shadow-warm-md:       0 4px 16px rgba(45,42,38,0.08), 0 1px 2px rgba(45,42,38,0.04);
  --shadow-warm-lg:       0 12px 32px rgba(45,42,38,0.12), 0 2px 6px rgba(45,42,38,0.06);

  /* Radius — 12px rounded (prototype --radius-base) */
  --radius:               0.75rem;

  /* Typography (prototype --font-display / --font-body / --font-mono) */
  --font-sans:    "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --motion-duration-fast:  120ms;
  --motion-duration:       200ms;
  --motion-duration-slow:  320ms;
  --motion-ease-standard:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --motion-ease-enter:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --motion-ease-exit:      cubic-bezier(0.4, 0.0, 1.0, 1.0);

  /* Hero back-chip: glass legibility scrim over a photo hero. Deliberately
     mode-invariant (not overridden in the dark-mode block below): it must
     stay legible over an actual photograph regardless of theme mode. */
  --hero-chip-border:      rgba(255, 255, 255, 0.28);
  --hero-chip-bg:          rgba(26, 23, 20, 0.42);
  --hero-chip-shadow:      0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-yga-template="classic"][data-yga-template-mode="dark"] {
  /* Surface — prototype [data-mode="dark"] --bg / --bg-elevated / --bg-sunken / --bg-tint */
  --background:           30 13% 9%;    /* #1A1714 deep warm near-black (prototype --bg) */
  --foreground:           40 41% 91%;   /* #F2ECE0 warm cream (prototype --fg) */
  --card:                 33 11% 13%;   /* #24211D (prototype --bg-elevated) */
  --card-foreground:      40 41% 91%;
  --popover:              33 11% 13%;
  --popover-foreground:   40 41% 91%;

  /* Muted / secondary — prototype dark --bg-sunken / --fg-muted */
  --muted:                27 14% 7%;    /* #14110F (prototype --bg-sunken) */
  --muted-foreground:     33 12% 62%;   /* #A89F90 (prototype --fg-muted) */
  --secondary:            27 14% 7%;
  --secondary-foreground: 40 41% 91%;

  /* Accent — sage green, dark variant */
  --accent:               138 5% 40%;
  --accent-foreground:    0 0% 100%;

  /* Warm tint surface — prototype dark --bg-tint */
  --accent-tint:          30 14% 12%;   /* #221E1A (prototype --bg-tint) */
  --accent-tint-foreground: 40 41% 91%;

  /* Pale-sage soft surface — dark variant, keeps the sage accent icon legible */
  --accent-soft:          120 7% 18%;   /* #2A302A warm dark sage (prototype dark --accent-soft) */

  /* Primary — terracotta preserved in dark (prototype keeps same hue) */
  --primary:              17 40% 54%;   /* terracotta preserved (same as light) */
  --primary-foreground:   0 0% 100%;
  --primary-hover:        17 37% 47%;
  --primary-rgb:          184 117 90;
  --ring:                 17 40% 54%;
  --destructive:          0 51% 53%;
  --destructive-foreground: 0 0% 98%;

  /* Borders — prototype dark --border / --border-strong */
  --border:               30 13% 18%;   /* #332E27 (prototype dark --border) */
  --border-strong:        30 14% 24%;   /* #473F35 (prototype dark --border-strong) */
  --input:                30 13% 18%;

  /* Extras — dark variants */
  --fg-subtle:            30 10% 38%;   /* #6B6358 (prototype dark --fg-subtle) */
  --gold:                 37 41% 55%;
  --gold-soft:            37 40% 16%;
  --primary-soft:         20 26% 18%;   /* #3A2A22 warm dark peach (prototype dark --primary-soft) */
  --success:              123 20% 40%;
  --success-soft:         130 20% 15%;  /* #1F2F22 warm dark sage (prototype dark --success-soft) */
  --destructive-soft:     7 26% 18%;    /* #3A2522 (prototype dark --destructive-soft) */
}

/* ── Accent presets ────────────────────────────────────────────────────────
   Toggled by [data-yga-accent="sage|rose|burgundy"] on the wrapper div
   rendered by TemplateThemeProvider. Terracotta is the default when
   no data-yga-accent attribute is present.

   Scope: the PRIMARY family — primary-CTA buttons, soft-primary badges,
   focus rings (--ring), primary links/selected states. Tokens
   overridden: --primary, --primary-hover, --primary-soft,
   --primary-rgb, --ring.

   The template's FIXED sage SECONDARY accent (--accent* tokens) is NOT
   repainted by presets; it stays sage under every preset. Only the
   primary family changes — never the secondary.

   Classic presets use DISTINCT light vs dark values. The un-qualified
   block targets dark mode; the [data-yga-template-mode="light"] block
   overrides for light mode.

   Source: docs/prototypes/classic/styles/tokens.css — hex→HSL converted.
   Hues: sage = sage green, rose = dusty rose,
         burgundy = deep brick / wine red.
   ────────────────────────────────────────────────────────────────────── */

/* ── Sage (sage green) ────────────────────────────────────────────────── */
[data-yga-template="classic"][data-yga-accent="sage"] {
  --primary:              93 21% 62%;    /* #9CB28A sage green (dark variant) */
  --primary-hover:        94 18% 55%;    /* #8AA278 sage hover (dark variant) */
  --primary-soft:         120 7% 18%;    /* #2A302A dark sage tint */
  --primary-rgb:          156 178 138;   /* #9CB28A for rgba() */
  --ring:                 93 21% 62%;    /* sage focus ring (matches --primary) */
}

[data-yga-template="classic"][data-yga-accent="sage"][data-yga-template-mode="light"] {
  --primary:              138 7% 51%;    /* #7A8B7F sage green (light variant) */
  --primary-hover:        138 7% 45%;    /* #6A7B6F sage hover (light variant) */
  --primary-soft:         84 19% 89%;    /* #E5E9DF light sage tint */
  --primary-rgb:          122 139 127;   /* #7A8B7F for rgba() */
  --ring:                 138 7% 51%;    /* sage focus ring (matches --primary) */
}

/* ── Rose (dusty rose) ────────────────────────────────────────────────── */
[data-yga-template="classic"][data-yga-accent="rose"] {
  --primary:              0 35% 74%;     /* #D4A5A5 dusty rose (dark variant) */
  --primary-hover:        0 28% 68%;     /* #C49595 rose hover (dark variant) */
  --primary-soft:         0 16% 20%;     /* #3A2A2A dark rose tint */
  --primary-rgb:          212 165 165;   /* #D4A5A5 for rgba() */
  --ring:                 0 35% 74%;     /* dusty rose focus ring (matches --primary) */
}

[data-yga-template="classic"][data-yga-accent="rose"][data-yga-template-mode="light"] {
  --primary:              0 27% 68%;     /* #C49898 dusty rose (light variant) */
  --primary-hover:        0 23% 62%;     /* #B48888 rose hover (light variant) */
  --primary-soft:         0 44% 93%;     /* #F5E5E5 light rose tint */
  --primary-rgb:          196 152 152;   /* #C49898 for rgba() */
  --ring:                 0 27% 68%;     /* dusty rose focus ring (matches --primary) */
}

/* ── Burgundy (deep brick / wine red) ─────────────────────────────────── */
[data-yga-template="classic"][data-yga-accent="burgundy"] {
  --primary:              13 32% 56%;    /* #B27A6A deep brick (dark variant) */
  --primary-hover:        13 29% 49%;    /* #A26A5A brick hover (dark variant) */
  --primary-soft:         15 26% 18%;    /* #3A2822 dark brick tint */
  --primary-rgb:          178 122 106;   /* #B27A6A for rgba() */
  --ring:                 13 32% 56%;    /* brick focus ring (matches --primary) */
}

[data-yga-template="classic"][data-yga-accent="burgundy"][data-yga-template-mode="light"] {
  --primary:              0 41% 39%;     /* #8B3A3A deep wine red (light variant) */
  --primary-hover:        0 45% 33%;     /* #7A2E2E wine hover (light variant) */
  --primary-soft:         0 44% 89%;     /* #F0D8D8 light brick tint */
  --primary-rgb:          139 58 58;     /* #8B3A3A for rgba() */
  --ring:                 0 41% 39%;     /* wine focus ring (matches --primary) */
}