/* Kept design tokens. Shared by the marketing site and the app.
   The page "theme" is chosen by data attributes on <html>, set by js/theme.js from the visitor's plan:
     data-side   = brand | barber | beauty | jr | household
     data-tier   = 1 | 2 | 3            (calm, rich, richest: layers, speed and sparkle scale with it)
     data-glow   = on | off             (Glow Club add-on: gold shimmer layer)
   Brand: orange #FFA500 and deep brown #2B1B0E. Side colors come from the Kept plan: blue, pink, green. */


/* Registered color properties let the whole page morph smoothly when the plan (theme) changes. */
@property --accent      { syntax: '<color>'; inherits: true; initial-value: #FF4A1C; }
@property --accent-ink  { syntax: '<color>'; inherits: true; initial-value: #9A5A00; }
@property --accent-deep { syntax: '<color>'; inherits: true; initial-value: #2B1B0E; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: #FFE3B0; }
@property --on-accent   { syntax: '<color>'; inherits: true; initial-value: #2B1B0E; }
@property --bg          { syntax: '<color>'; inherits: true; initial-value: #FFFBF4; }
@property --surface     { syntax: '<color>'; inherits: true; initial-value: #FFF1DA; }
@property --line        { syntax: '<color>'; inherits: true; initial-value: #EEDBBD; }
@property --fg          { syntax: '<color>'; inherits: true; initial-value: #2B1B0E; }
@property --muted       { syntax: '<color>'; inherits: true; initial-value: #6E5640; }
@property --hero        { syntax: '<color>'; inherits: true; initial-value: #FFA500; }
@property --hero-ink    { syntax: '<color>'; inherits: true; initial-value: #2B1B0E; }
@property --intensity   { syntax: '<number>'; inherits: true; initial-value: .6; }

html { transition: --accent .8s ease, --accent-ink .8s ease, --accent-deep .8s ease, --accent-soft .8s ease, --on-accent .8s ease,
  --bg .8s ease, --surface .8s ease, --line .8s ease, --fg .8s ease, --muted .8s ease, --hero .8s ease, --hero-ink .8s ease, --intensity .8s ease; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="on"]) { transition: none; } }

:root {
  --orange: #FF4A1C;      /* master accent: vermilion */
  --brown: #0E0E0E;       /* jet ink */
  --cream: #F5F2EC;       /* newsprint */
  --sand: #ECE7DD;
  --sand-line: #D9D2C4;
  --blue: #2D46F5;        /* cobalt */
  --pink: #7B4DFF;        /* ultraviolet (beauty): deliberately not pink */
  --green: #C6F135;       /* acid lime */
  --gold: #D9A84A;

  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --accent: #FF4A1C;
  --accent-ink: #C42A0E;
  --accent-deep: #0E0E0E;
  --accent-soft: #FFD9CF;
  --on-accent: #0E0E0E;
  --bg: #FFFFFF;
  --surface: #F3F2EF;
  --line: #E2E0DA;
  --fg: #0E0E0E;
  --muted: #5E5A52;
  --hero: #0E0E0E;
  --hero-ink: #FFFFFF;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 700ms;
  --radius: 0px;
  --radius-sm: 0px;
  --intensity: .6;
  --parallax: 1;
  --tilt: 0deg;
  --sparkle: 0;
  --glow-a: var(--gold);
  --glow-b: #E6CE9B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E0E; --surface: #1A1917; --line: #34322E; --fg: #F5F2EC; --muted: #B3AEA3;
    --accent-ink: #FF7A57; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E0E; --surface: #1A1917; --line: #34322E; --fg: #F5F2EC; --muted: #B3AEA3;
  --accent-ink: #FF7A57; color-scheme: dark;
}

/* ---------- sides: one saturated, non-gendered hue each ---------- */
:root[data-side="barber"] {
  --accent: #2D46F5; --accent-ink: #1E33C9; --accent-deep: #0B0F2E; --accent-soft: #DCE1FF;
  --on-accent: #fff; --hero: #0B0F2E; --hero-ink: #F1F3FF;
  --bg: #F4F5F8; --surface: #E8EAF2; --line: #D3D7E6; --fg: #0B0F1F; --muted: #565B73;
  --ease: cubic-bezier(.7, 0, .2, 1); --dur: 420ms; --parallax: 1.25;
}
:root[data-side="beauty"] {
  --accent: #7B4DFF; --accent-ink: #5B2FE0; --accent-deep: #1A0B2E; --accent-soft: #E6DDFF;
  --on-accent: #fff; --hero: #1A0B2E; --hero-ink: #F4F0FF;
  --bg: #F6F4F9; --surface: #EBE7F2; --line: #D9D3E6; --fg: #140B22; --muted: #5F5873;
  --ease: cubic-bezier(.25, .85, .3, 1); --dur: 1100ms; --parallax: .85;
}
:root[data-side="jr"] {
  --accent: #C6F135; --accent-ink: #4F6B00; --accent-deep: #0E1A08; --accent-soft: #EAF8B8;
  --on-accent: #0E1A08; --hero: #0E1A08; --hero-ink: #F3FBE0;
  --bg: #F7F8F1; --surface: #ECEFDF; --line: #D9DEC4; --fg: #101808; --muted: #586046;
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 600ms; --parallax: 1.1;
}
:root[data-side="household"] {
  --accent: #FF9F1C; --accent-ink: #A35F00; --accent-deep: #1E1409; --accent-soft: #FFE7BF;
  --on-accent: #1E1409; --hero: #1E1409; --hero-ink: #FBF1DE;
  --bg: #F8F3EA; --surface: #EFE6D6; --line: #DDD1BA; --fg: #1E1409; --muted: #675A46;
  --ease: cubic-bezier(.4, .1, .2, 1); --dur: 850ms; --parallax: 1;
}

@media (prefers-color-scheme: dark) {
  :root[data-side="barber"]:not([data-theme="light"]) { --bg:#080B1E; --surface:#10163A; --line:#232B66; --fg:#EEF0FF; --muted:#A3A9D6; --accent-ink:#8D9CFF; }
  :root[data-side="beauty"]:not([data-theme="light"]) { --bg:#100620; --surface:#1B0E33; --line:#34205C; --fg:#F2EEFF; --muted:#B3A9D6; --accent-ink:#B7A0FF; }
  :root[data-side="jr"]:not([data-theme="light"]) { --bg:#090F05; --surface:#121D0A; --line:#26391A; --fg:#F1F8DC; --muted:#A9B88C; --accent-ink:#C6F135; }
  :root[data-side="household"]:not([data-theme="light"]) { --bg:#140D06; --surface:#21160A; --line:#3D2A15; --fg:#FBF1DE; --muted:#C2B193; --accent-ink:#FFB347; }
}

/* ---------- tiers: how rich the motion and decoration get ---------- */
:root[data-tier="1"] { --intensity: .45; }
:root[data-tier="2"] { --intensity: .75; }
:root[data-tier="3"] { --intensity: 1; }

/* ---------- glow club: shimmer on top of any side ---------- */
:root[data-glow="on"] { --sparkle: 1; --accent-soft: color-mix(in srgb, var(--accent-soft) 70%, var(--glow-b)); }

/* ---------- reduced motion: no travel, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) { --parallax: 0; --sparkle: 0; --dur: 1ms; }
}
:root[data-motion="off"] { --parallax: 0; --sparkle: 0; --dur: 1ms; }