/*
 * Ke rebrand design foundation.
 *
 * This layer is deliberately body-scoped so the current /app experience is
 * unchanged. Page styles can consume the semantic tokens below without
 * introducing another page-specific palette, radius, shadow, or motion scale.
 */

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) {
  /* Shared brand primitives consumed by every rebrand experience. */
  --ke-ink: #1a2830;
  --ke-burgundy: #602537;
  --ke-gold: #d9b671;
  --ke-gold-highlight: #ecd08e;
  --ke-paper: #fdfbf7;
  --ke-canvas: #f7f1e8;
  --ke-sage: #81988a;
  --ke-danger: #a54659;

  /* Brand color */
  --ke-navy-950: #101b22;
  --ke-navy-900: var(--ke-ink);
  --ke-navy-800: #263944;
  --ke-burgundy-700: var(--ke-burgundy);
  --ke-burgundy-600: #743047;
  --ke-gold-600: #c39a4a;
  --ke-gold-500: var(--ke-gold);
  --ke-gold-300: var(--ke-gold-highlight);
  --ke-paper-100: #fffefa;
  --ke-paper-200: var(--ke-paper);
  --ke-porcelain-300: var(--ke-canvas);
  --ke-porcelain-400: #eee4d7;

  /* Semantic color */
  --ke-color-canvas: var(--ke-porcelain-300);
  --ke-color-surface: var(--ke-paper-100);
  --ke-color-surface-subtle: var(--ke-paper-200);
  --ke-color-surface-dark: var(--ke-navy-900);
  --ke-color-surface-dark-raised: var(--ke-navy-800);
  --ke-color-text: var(--ke-navy-900);
  --ke-color-text-secondary: #5f6b70;
  --ke-color-text-tertiary: #778186;
  --ke-color-text-inverse: #fffaf2;
  --ke-color-accent: var(--ke-burgundy-700);
  --ke-color-action: var(--ke-gold-500);
  --ke-color-action-highlight: var(--ke-gold-300);
  --ke-color-line: rgba(26, 40, 48, .1);
  --ke-color-line-strong: rgba(26, 40, 48, .16);
  --ke-color-line-warm: rgba(195, 154, 74, .34);
  --ke-color-focus: var(--ke-gold-300);
  --ke-color-scrim: rgba(12, 23, 29, .68);

  /* Type */
  --ke-font-display: "Playfair Display", Georgia, serif;
  --ke-font-reflective: "Cormorant Garamond", Georgia, serif;
  --ke-font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ke-font-size-label: .75rem;
  --ke-font-size-caption: .8125rem;
  --ke-font-size-body-sm: .875rem;
  --ke-font-size-body: 1rem;
  --ke-font-size-title-sm: 1.25rem;
  --ke-font-size-title: clamp(1.625rem, 3vw, 2.25rem);
  --ke-font-size-display: clamp(2.25rem, 5vw, 3.75rem);
  --ke-leading-tight: 1.08;
  --ke-leading-copy: 1.5;
  --ke-tracking-label: .08em;

  /* Four-point spatial rhythm */
  --ke-space-1: 4px;
  --ke-space-2: 8px;
  --ke-space-3: 12px;
  --ke-space-4: 16px;
  --ke-space-5: 20px;
  --ke-space-6: 24px;
  --ke-space-8: 32px;
  --ke-space-10: 40px;
  --ke-space-12: 48px;
  --ke-space-16: 64px;

  /* Shape */
  --ke-radius-control: 12px;
  --ke-radius-card: 16px;
  --ke-radius-hero: 20px;
  --ke-radius-feature: var(--ke-radius-hero);
  --ke-radius-modal: 28px;
  --ke-radius-pill: 999px;
  --ke-radius-circle: 50%;
  --ke-control-min: 44px;

  /* Elevation and material */
  --ke-shadow-resting: 0 1px 2px rgba(16, 27, 34, .05), 0 8px 24px rgba(16, 27, 34, .055);
  --ke-shadow-card: 0 2px 4px rgba(16, 27, 34, .045), 0 16px 40px rgba(16, 27, 34, .075);
  --ke-shadow-raised: 0 10px 28px rgba(16, 27, 34, .12), 0 2px 7px rgba(16, 27, 34, .07);
  --ke-shadow-floating: 0 18px 50px rgba(16, 27, 34, .18), 0 3px 10px rgba(16, 27, 34, .08);
  --ke-shadow-overlay: 0 30px 90px rgba(10, 20, 25, .3), 0 4px 18px rgba(10, 20, 25, .12);
  --ke-shadow-modal: var(--ke-shadow-overlay);
  --ke-highlight-porcelain: inset 0 1px 0 rgba(255, 255, 255, .92);
  --ke-highlight-smoked: inset 0 1px 0 rgba(255, 255, 255, .075);
  --ke-highlight-enamel: inset 0 1px 0 rgba(255, 249, 223, .52), inset 0 -1px 0 rgba(96, 37, 55, .2);

  /* Motion */
  --ke-duration-instant: 100ms;
  --ke-duration-fast: 160ms;
  --ke-duration-base: 240ms;
  --ke-duration-slow: 360ms;
  --ke-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ke-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --ke-ease-spring: cubic-bezier(.2, .82, .24, 1.18);

  /* Layering */
  --ke-layer-content: 1;
  --ke-layer-sticky: 20;
  --ke-layer-nav: 40;
  --ke-layer-scrim: 60;
  --ke-layer-modal: 70;
  --ke-layer-toast: 80;
  --ke-layer-critical: 90;

  accent-color: var(--ke-color-accent);
  background:
    radial-gradient(circle at 8% -8%, rgba(217, 182, 113, .13), transparent 34%),
    linear-gradient(180deg, var(--ke-paper-200), var(--ke-color-canvas));
  color: var(--ke-color-text);
  font-family: var(--ke-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) * {
  -webkit-tap-highlight-color: transparent;
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) ::selection {
  background: rgba(217, 182, 113, .38);
  color: var(--ke-color-text);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) :where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--ke-color-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(217, 182, 113, .18);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) :where(button, a, [role="button"]) {
  touch-action: manipulation;
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) :where(button, [role="button"], input:not([type="hidden"]), select) {
  min-block-size: var(--ke-control-min);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) :where(.ke-surface, .ke-surface-raised, .ke-surface-signature) {
  border: 1px solid var(--ke-color-line);
  border-radius: var(--ke-radius-card);
  box-shadow: var(--ke-highlight-porcelain), var(--ke-shadow-resting);
  isolation: isolate;
  position: relative;
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-surface {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 38%), var(--ke-color-surface);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-surface-raised {
  background: var(--ke-color-surface);
  box-shadow: var(--ke-highlight-porcelain), var(--ke-shadow-card);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-surface-signature {
  background:
    radial-gradient(circle at 78% -20%, rgba(236, 208, 142, .15), transparent 42%),
    linear-gradient(145deg, var(--ke-navy-800), var(--ke-navy-950));
  border-color: var(--ke-color-line-warm);
  box-shadow: var(--ke-highlight-smoked), var(--ke-shadow-raised);
  color: var(--ke-color-text-inverse);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-smoked-glass {
  background: linear-gradient(180deg, rgba(38, 57, 68, .92), rgba(16, 27, 34, .94));
  border: 1px solid rgba(236, 208, 142, .18);
  box-shadow: var(--ke-highlight-smoked), var(--ke-shadow-raised);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-enamel-flame {
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .46), transparent 22%),
    linear-gradient(145deg, var(--ke-gold-300), var(--ke-gold-500) 48%, var(--ke-gold-600));
  border: 1px solid rgba(255, 250, 226, .58);
  border-radius: var(--ke-radius-circle);
  box-shadow: var(--ke-highlight-enamel), 0 8px 22px rgba(16, 27, 34, .18), 0 0 0 1px rgba(96, 37, 55, .1);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-pressable {
  transition:
    box-shadow var(--ke-duration-base) var(--ke-ease-standard),
    transform var(--ke-duration-fast) var(--ke-ease-standard);
}

:is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-pressable:active {
  transform: translateY(1px) scale(.985);
}

@media (hover: hover) and (pointer: fine) {
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active) .ke-pressable:hover {
    box-shadow: var(--ke-highlight-porcelain), var(--ke-shadow-raised);
    transform: translateY(-1px);
  }
}

@media (prefers-contrast: more) {
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active) {
    --ke-color-line: rgba(26, 40, 48, .28);
    --ke-color-line-strong: rgba(26, 40, 48, .42);
    --ke-color-line-warm: rgba(195, 154, 74, .72);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active),
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active) *,
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active) *::before,
  :is(html.ke-rebrand-mode body, body.ke-rebrand-active) *::after {
    animation-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}