/* Design tokens — tweak here to explore tones */
:root {
  /* Brand wordmark ink — remapped per theme to match themed logo/nav icons */
  --color-brand-navy: #0c1628;
  /* Ink: defaults to navy; pastel themes replace with a darker theme hue */
  --color-navy-950: #060d18;
  --color-navy-900: #0c1628;
  --color-navy-800: #132038;
  --color-navy-700: #1c2d4a;
  --color-silver-100: #eef1f5;
  --color-silver-200: #d8dee6;
  --color-silver-300: #abb6c5;
  --color-silver-400: #8794a6;
  --color-silver-500: #6b7686;

  /* Accent — steel blue-gray CTAs (aligned with header gray) */
  --color-accent: #8794a6;
  --color-accent-hover: #6f7c90;
  --color-accent-soft: rgba(135, 148, 166, 0.2);

  /* Semantic — paper/surfaces + light-on-dark ink are soft tints of page bg (never pure white) */
  --color-bg: var(--color-silver-100);
  --color-surface: color-mix(in srgb, var(--color-bg) 52%, #ffffff);
  --color-surface-muted: color-mix(in srgb, var(--color-bg) 68%, #ffffff);
  --color-silver-50: color-mix(in srgb, var(--color-bg) 78%, #ffffff);
  /* Text/icons on filled navy/accent buttons */
  --color-on-strong: color-mix(in srgb, var(--color-bg) 32%, #ffffff);
  --color-text: var(--color-navy-900);
  --color-text-muted: var(--color-silver-500);
  --color-border: var(--color-silver-300);
  --color-slot: #2d8a5e;
  --color-slot-bg: rgba(45, 138, 94, 0.16);
  --color-danger: #c44b4b;
  /* Favorites hearts — same bright red on every theme (do not remap per theme) */
  --color-heart: #ff1a1a;
  --color-success: #2d8a5e;

  /* Typography */
  --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand-en: "Crimson Text", "Times New Roman", Times, serif;
  --font-brand-he: "David Libre", "Times New Roman", Times, serif;
  --font-brand-ru: "Great Vibes", "Times New Roman", Times, cursive;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radius & shadow */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(12, 22, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(12, 22, 40, 0.1);
  --shadow-lg: 0 8px 32px rgba(12, 22, 40, 0.14);

  /* Layout */
  --header-height: 3.5rem;
  --max-width: 32rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
  UI themes: pastel page tones + accent CTAs.
  Default [data-theme="svivli"] — graphite metal (mid-gray chrome + silver volume).
  Other themes remap --color-navy-* and --color-brand-navy (wordmark = Figma icon ink).
  Nav/logo swap via theme.js from assets/brand/themes/{id}/ (transparent PNG;
  svivli / linen / mist keep assets/brand SVG logo + PNG icons).
*/
[data-theme="svivli"] {
  --color-brand-navy: #0c1628;
  --color-navy-950: #060d18;
  --color-navy-900: #0c1628;
  --color-navy-800: #1a2436;
  --color-navy-700: #2a3548;
  --color-bg: #2e2e34;
  --color-surface: #8a8a94;
  --color-surface-muted: #7a7a84;
  --color-silver-50: #9a9aa4;
  --color-silver-100: #2e2e34;
  --color-silver-200: #3a3a42;
  --color-silver-300: #5a5a64;
  --color-silver-400: #7a7a84;
  --color-silver-500: #a8a8b2;
  --color-header-bg: #8a8a94;
  --color-header-border: #6a6a74;
  --color-accent: #b0b0ba;
  --color-accent-hover: #90909a;
  --color-accent-soft: rgba(176, 176, 186, 0.28);
  --color-text: #e8e8ec;
  --color-text-muted: #b0b0ba;
  --color-border: #5a5a64;
  --color-on-strong: #0c1628;
  --color-slot: #2dd4a0;
  --color-slot-bg: rgba(45, 212, 160, 0.18);
  --color-success: #2dd4a0;
  --color-danger: #c44b4b;
  --metal-active: linear-gradient(180deg, #ffffff 0%, #e8e8ec 22%, #b8b8c0 58%, #8a8a94 100%);
  --metal-inactive: linear-gradient(180deg, #a8a8b2 0%, #8a8a94 38%, #6e6e78 72%, #5a5a64 100%);
  --metal-field: linear-gradient(180deg, #9a9aa4 0%, #7a7a84 45%, #5e5e68 100%);
  --metal-header: linear-gradient(180deg, #b0b0ba 0%, #90909a 42%, #74747e 78%, #62626c 100%);
  --metal-card: linear-gradient(180deg, #9a9aa4 0%, #7e7e88 48%, #6a6a74 100%);
  --metal-card-bar: linear-gradient(180deg, #3a3a44 0%, #1a1a22 55%, #0c1628 100%);
  --metal-edge: #c0c0c8;
  --metal-edge-dark: #4a4a52;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.48);
}

/*
  Linen — warm cream + taupe chrome around original navy brand (screenshot 1).
*/
[data-theme="linen"] {
  --color-brand-navy: #0c1628;
  --color-navy-950: #060d18;
  --color-navy-900: #0c1628;
  --color-navy-800: #132038;
  --color-navy-700: #1c2d4a;
  --color-bg: #f5ede0;
  --color-surface: #fffbf5;
  --color-surface-muted: #ebe3d6;
  --color-silver-50: #faf6ef;
  --color-silver-100: #f5ede0;
  --color-silver-200: #e8dfd0;
  --color-silver-300: #c8b9a6;
  --color-silver-400: #a89886;
  --color-silver-500: #7a6c5c;
  --color-header-bg: #efe6d8;
  --color-header-border: #d4c8b8;
  --color-accent: #c8b9a6;
  --color-accent-hover: #b0a090;
  --color-accent-soft: rgba(200, 185, 166, 0.35);
  --color-text: #0c1628;
  --color-text-muted: #5a5044;
  --color-border: #c8b9a6;
  --color-on-strong: #f7f4ef;
  --color-slot: #0c1628;
  --color-slot-bg: rgba(200, 185, 166, 0.35);
  --color-success: #2d8a5e;
  --shadow-sm: 0 1px 3px rgba(12, 22, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(12, 22, 40, 0.12);
  --shadow-lg: 0 8px 32px rgba(12, 22, 40, 0.16);
}

/*
  Mist — soft lavender header + mint page around original navy brand (screenshot 2).
*/
[data-theme="mist"] {
  --color-brand-navy: #0c1628;
  --color-navy-950: #060d18;
  --color-navy-900: #0c1628;
  --color-navy-800: #132038;
  --color-navy-700: #1c2d4a;
  --color-bg: #d8ebe6;
  --color-surface: #f7faf9;
  --color-surface-muted: #e4f0ec;
  --color-silver-50: #f2f6f8;
  --color-silver-100: #d8ebe6;
  --color-silver-200: #c5ddd7;
  --color-silver-300: #a8c8d8;
  --color-silver-400: #8aa8c0;
  --color-silver-500: #5a7088;
  --color-header-bg: #e6e0f2;
  --color-header-border: #cfc6e4;
  --color-accent: #c4b8e0;
  --color-accent-hover: #a898d0;
  --color-accent-soft: rgba(196, 184, 224, 0.35);
  --color-text: #0c1628;
  --color-text-muted: #4a5a6a;
  --color-border: #b0c4d0;
  --color-on-strong: #f7f8fa;
  --color-slot: #0c1628;
  --color-slot-bg: rgba(168, 200, 216, 0.35);
  --color-success: #2d8a5e;
  --shadow-sm: 0 1px 3px rgba(12, 22, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(12, 22, 40, 0.12);
  --shadow-lg: 0 8px 32px rgba(12, 22, 40, 0.16);
}

[data-theme="sage"],
[data-theme="lavender"],
[data-theme="peach"],
[data-theme="sky"],
[data-theme="sand"],
[data-theme="linen"],
[data-theme="mist"] {
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-navy-900) 10%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-navy-900) 16%, transparent);
  --shadow-lg: 0 8px 32px color-mix(in srgb, var(--color-navy-900) 22%, transparent);
}

[data-theme="sage"] {
  --color-brand-navy: #0f2f20; /* Figma Theme icons / Sage Mist */
  --color-navy-950: #071a12;
  --color-navy-900: #0e2f20;
  --color-navy-800: #164a32;
  --color-navy-700: #1e5f40;
  --color-bg: #dcefe3;
  --color-border: #b7d9c4;
  --color-silver-100: #dcefe3;
  --color-silver-200: #c4e3cf;
  --color-silver-300: #9eccb0;
  --color-silver-400: #6fa888;
  --color-silver-500: #4e7a62;
  --color-text-muted: #4e7a62;
  --color-accent: #2f9a68;
  --color-accent-hover: #247a52;
  --color-accent-soft: rgba(47, 154, 104, 0.18);
  --color-slot: #2a7a55;
  --color-slot-bg: rgba(42, 122, 85, 0.16);
  --color-success: #2f9a68;
}

[data-theme="lavender"] {
  --color-brand-navy: #1e1645; /* Figma Theme icons / Lavender Air */
  --color-navy-950: #120c28;
  --color-navy-900: #1f1645;
  --color-navy-800: #2d1f62;
  --color-navy-700: #3c2a7a;
  --color-bg: #e6ddf6;
  --color-border: #cbbce8;
  --color-silver-100: #e6ddf6;
  --color-silver-200: #d4c6ef;
  --color-silver-300: #b9a6e0;
  --color-silver-400: #8f7cc4;
  --color-silver-500: #5e5288;
  --color-text-muted: #5e5288;
  --color-accent: #6a58d4;
  --color-accent-hover: #5546b8;
  --color-accent-soft: rgba(106, 88, 212, 0.18);
  --color-slot: #5346b0;
  --color-slot-bg: rgba(83, 70, 176, 0.16);
  --color-success: #5346b0;
}

[data-theme="peach"] {
  --color-brand-navy: #3a1824; /* Figma Theme icons / Peach Cloud */
  --color-navy-950: #2a1008;
  --color-navy-900: #3f1810;
  --color-navy-800: #5a2416;
  --color-navy-700: #70301c;
  --color-bg: #ffdfcc;
  --color-border: #f0c3a8;
  --color-silver-100: #ffdfcc;
  --color-silver-200: #f6cbb0;
  --color-silver-300: #e8ad8a;
  --color-silver-400: #c48464;
  --color-silver-500: #8a5a44;
  --color-text-muted: #8a5a44;
  --color-accent: #e06a42;
  --color-accent-hover: #c45532;
  --color-accent-soft: rgba(224, 106, 66, 0.2);
  --color-slot: #c25538;
  --color-slot-bg: rgba(194, 85, 56, 0.16);
  --color-success: #2d8a5e;
}

[data-theme="sky"] {
  --color-brand-navy: #0c2c3d; /* Figma Theme icons / Sky Milk */
  --color-navy-950: #061820;
  --color-navy-900: #0c2c3e;
  --color-navy-800: #144058;
  --color-navy-700: #1c5470;
  --color-bg: #d4ecf8;
  --color-border: #a8d4ea;
  --color-silver-100: #d4ecf8;
  --color-silver-200: #b9dff2;
  --color-silver-300: #8ec8e4;
  --color-silver-400: #5ea0c2;
  --color-silver-500: #3d6f8c;
  --color-text-muted: #3d6f8c;
  --color-accent: #2f86c4;
  --color-accent-hover: #246ea3;
  --color-accent-soft: rgba(47, 134, 196, 0.18);
  --color-slot: #276d9e;
  --color-slot-bg: rgba(39, 109, 158, 0.16);
  --color-success: #2d8a5e;
}

[data-theme="sand"] {
  --color-brand-navy: #3a1724; /* Figma Theme icons / Sand Rose (+ Rose page, same ink) */
  --color-navy-950: #241018;
  --color-navy-900: #3a1824;
  --color-navy-800: #542232;
  --color-navy-700: #6c2c40;
  --color-bg: #f3e0c8;
  --color-border: #e2c49e;
  --color-silver-100: #f3e0c8;
  --color-silver-200: #e8d0b0;
  --color-silver-300: #d4b388;
  --color-silver-400: #b08860;
  --color-silver-500: #7a5a40;
  --color-text-muted: #7a5a40;
  --color-accent: #d45a7a;
  --color-accent-hover: #b84666;
  --color-accent-soft: rgba(212, 90, 122, 0.2);
  --color-slot: #a84462;
  --color-slot-bg: rgba(168, 68, 98, 0.16);
  --color-success: #2d8a5e;
}

/*
  Dark neon themes (Cyan / Ember / Amber Night).
  Refs: SHADOW blue-gray charcoal · orange AI near-black · yellow kit soft charcoal.
  --color-navy-* = light ink for text; strong fills remapped via [data-theme-mode="dark"].
*/
[data-theme="cyan-night"],
[data-theme="ember-night"],
[data-theme="amber-night"] {
  color-scheme: dark;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.58);
}

/* Cyan Night — SHADOW: blue-gray charcoal (not pure black) */
[data-theme="cyan-night"] {
  --color-brand-navy: #00e5ff; /* Figma Theme-icons / Cyan Night */
  --color-navy-950: #e8fbff;
  --color-navy-900: #d6f6ff;
  --color-navy-800: #a8e8f5;
  --color-navy-700: #7ad4e8;
  --color-bg: #141820;
  --color-surface: #1e2430;
  --color-surface-muted: #272e3c;
  --color-silver-50: #252c3a;
  --color-silver-100: #141820;
  --color-silver-200: #343c4c;
  --color-silver-300: #4a5466;
  --color-silver-400: #7a8698;
  --color-silver-500: #9aa6b6;
  --color-text: #e8f4f8;
  --color-text-muted: #8a9aab;
  --color-border: #343c4c;
  --color-header-bg: #1a202a;
  --color-header-border: #343c4c;
  --color-accent: #00e5ff;
  --color-accent-hover: #00b8d4;
  --color-accent-soft: rgba(0, 229, 255, 0.22);
  --color-on-strong: #061018;
  --color-slot: #00b8d4;
  --color-slot-bg: rgba(0, 229, 255, 0.16);
  --color-success: #2dd4a0;
  --color-danger: #ff6b6b;
}

/* Ember Night — orange AI kit: the near-black theme */
[data-theme="ember-night"] {
  --color-brand-navy: #ff6d00; /* Figma Theme-icons / Ember Night */
  --color-navy-950: #fff3e8;
  --color-navy-900: #ffe8d4;
  --color-navy-800: #ffc9a0;
  --color-navy-700: #ffaa70;
  --color-bg: #050505;
  --color-surface: #141414;
  --color-surface-muted: #1c1c1c;
  --color-silver-50: #1a1a1a;
  --color-silver-100: #050505;
  --color-silver-200: #2a2a2a;
  --color-silver-300: #3d3d3d;
  --color-silver-400: #757575;
  --color-silver-500: #9e9e9e;
  --color-text: #f5f5f5;
  --color-text-muted: #9e9e9e;
  --color-border: #2a2a2a;
  --color-header-bg: #101010;
  --color-header-border: #2a2a2a;
  --color-accent: #ff6d00;
  --color-accent-hover: #ff9100;
  --color-accent-soft: rgba(255, 109, 0, 0.24);
  --color-on-strong: #140a04;
  --color-slot: #ff9100;
  --color-slot-bg: rgba(255, 109, 0, 0.18);
  --color-success: #2dd4a0;
  --color-danger: #ff5252;
}

/* Amber Night — yellow finance kit: soft charcoal gray layers */
[data-theme="amber-night"] {
  --color-brand-navy: #ffcc00; /* Figma Theme-icons / Amber Night (= accent / buttons) */
  --color-navy-950: #fffde7;
  --color-navy-900: #fff8d0;
  --color-navy-800: #ffe98a;
  --color-navy-700: #ffd54f;
  --color-bg: #1a1a1e;
  --color-surface: #26262c;
  --color-surface-muted: #2e2e36;
  --color-silver-50: #2c2c34;
  --color-silver-100: #1a1a1e;
  --color-silver-200: #3a3a44;
  --color-silver-300: #52525e;
  --color-silver-400: #8e8e9a;
  --color-silver-500: #b0b0ba;
  --color-text: #f2f2f5;
  --color-text-muted: #a0a0aa;
  --color-border: #3a3a44;
  --color-header-bg: #222228;
  --color-header-border: #3a3a44;
  --color-accent: #ffcc00;
  --color-accent-hover: #ffd54f;
  --color-accent-soft: rgba(255, 204, 0, 0.22);
  --color-on-strong: #1a1608;
  --color-slot: #ffd54f;
  --color-slot-bg: rgba(255, 204, 0, 0.16);
  --color-success: #2dd4a0;
  --color-danger: #ff5252;
}

/* Background photo is independent of color theme. */
html[data-bg-photo="1"] {
  min-height: 100%;
  background-color: var(--color-bg, #dfe4e0);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-bg) 38%, transparent),
      color-mix(in srgb, var(--color-surface) 55%, transparent)
    ),
    var(--theme-photo-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-bg-photo="1"] body.app-body {
  background: transparent;
}