/* Copied unchanged from ~/code/fuchsia-night/theme.plain.css at fuchsia-night commit b6eaadce34c6 (danamor-website #1967). */
/* Theme: Fuchsia Night, plain CSS for apps without Tailwind. Generated by src/tokens/build.ts;
   edit src/tokens/palette.ts, not this file. Same tokens as theme.css, without @theme, @source or @apply.
   Fonts are not included: load "Syne" and "Inter" yourself (for example the standards fonts/fonts.css)
   before this file. Dark: class="dark" on <html>, or the OS asks for dark (opt out with class="light").
   class="light" or class="dark" on any element inside the page switches that area. */

/* Light theme */
:root {
  color-scheme: light;
  --color-primary-50: #FFF3F7;
  --color-primary-100: #FFE2ED;
  --color-primary-200: #FFC7DD;
  --color-primary-300: #FF9FC7;
  --color-primary-400: #FF67B0;
  --color-primary-500: #EE2F97;
  --color-primary-600: #DB0F87;
  --color-primary-700: #A40063;
  --color-primary-800: #7F004B;
  --color-primary-900: #5C0035;
  --color-primary-950: #39001F;
  --color-highlight-50: #F7F5FF;
  --color-highlight-100: #EBE8FF;
  --color-highlight-200: #DAD2FF;
  --color-highlight-300: #C3B4FF;
  --color-highlight-400: #AA91FF;
  --color-highlight-500: #8B5CF6;
  --color-highlight-600: #7C4FDF;
  --color-highlight-700: #6339B8;
  --color-highlight-800: #4C2892;
  --color-highlight-900: #361A6B;
  --color-highlight-950: #200B45;
  --color-neutral-50: #FDF9FA;
  --color-neutral-100: #F6F2F4;
  --color-neutral-200: #EBE4E6;
  --color-neutral-300: #D9D2D4;
  --color-neutral-400: #A69FA2;
  --color-neutral-500: #777173;
  --color-neutral-600: #565153;
  --color-neutral-700: #433E40;
  --color-neutral-800: #2A2527;
  --color-neutral-900: #191516;
  --color-neutral-950: #0D090A;
  --color-success-50: #EDFBEF;
  --color-success-100: #D7F4DB;
  --color-success-200: #B1EABB;
  --color-success-300: #80D893;
  --color-success-400: #22C55E;
  --color-success-500: #00A84B;
  --color-success-600: #008B3C;
  --color-success-700: #006E2E;
  --color-success-800: #005422;
  --color-success-900: #003C16;
  --color-success-950: #00230A;
  --color-warning-50: #FFF5EA;
  --color-warning-100: #FDE7CF;
  --color-warning-200: #F9D1A4;
  --color-warning-300: #F59E0B;
  --color-warning-400: #E09321;
  --color-warning-500: #C17B00;
  --color-warning-600: #9F6400;
  --color-warning-700: #7E4F00;
  --color-warning-800: #613B00;
  --color-warning-900: #462900;
  --color-warning-950: #2A1700;
  --color-danger-50: #FFF4F3;
  --color-danger-100: #FFE4E1;
  --color-danger-200: #FFCAC5;
  --color-danger-300: #FFA59D;
  --color-danger-400: #FF756D;
  --color-danger-500: #EF4444;
  --color-danger-600: #CD2B30;
  --color-danger-700: #A8151F;
  --color-danger-800: #840613;
  --color-danger-900: #610109;
  --color-danger-950: #3C0003;
  --color-info-50: #F2F7FF;
  --color-info-100: #E0ECFF;
  --color-info-200: #C4DBFF;
  --color-info-300: #9DC2FF;
  --color-info-400: #6FA6FF;
  --color-info-500: #3B82F6;
  --color-info-600: #2B6DD9;
  --color-info-700: #1A55B3;
  --color-info-800: #0E408E;
  --color-info-900: #062C68;
  --color-info-950: #011843;

  --radius: 0.125rem;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --shadow-glow: none;

  /* Component style: shape, weight, case, borders vs fills, glow, density, type scale */
  --font-ui: var(--font-sans);
  --heading-weight: 700;
  --heading-case: none;
  --heading-tracking: -0.035em;
  --heading-leading: 1.2;
  --text-hero: clamp(2.75rem, 7vw, 4.5rem);
  --text-h1: clamp(2rem, 5vw, 3rem);
  --text-h2: 2.25rem;
  --text-h3: 1.5rem;
  --ui-weight: 600;
  --ui-case: none;
  --ui-tracking: 0;
  --ui-size: 0.9375rem;
  --radius-control: 2px;
  --radius-card: 0px;
  --radius-chip: 2px;
  --control-h: 2.75rem;
  --control-pad: 1.25rem;
  --space: 1.5rem;
  --card-bg: var(--background);
  --card-border-w: 1px;
  --card-border: var(--foreground);
  --card-shadow: none;
  --btn-primary-shadow: none;
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--foreground);
  --btn-secondary-border: var(--foreground);
  --btn-secondary-shadow: none;
  --input-bg: transparent;
  --input-border-w: 0 0 1px 0;
  --input-radius: 0px;
  --input-pad: 0;
  --chip-bg: transparent;
  --chip-fg: var(--foreground);
  --chip-border: var(--foreground);
  --chip-case: uppercase;
  --chip-tracking: 0.1em;
  --chip-shadow: none;
  --nav-current-bg: transparent;
  --nav-current-fg: var(--foreground);
  --nav-current-mark: inset 0 -2px 0 var(--primary);
  --nav-current-glow: none;
  --nav-radius: 0px;
  --heading-glow: none;
  --label-case: uppercase;
  --label-tracking: 0.08em;
  --label-size: 0.75rem;
  --label-weight: 600;
  --tablist-bg: transparent;
  --tab-selected-bg: transparent;
  --tab-selected-mark: inset 0 -2px 0 var(--primary);
  --tablist-rule: inset 0 -1px 0 var(--border);
  --popover-border: var(--foreground);
  --popover-shadow: 6px 6px 0 0 var(--primary);
  --card-hover-border: var(--primary);
  --rule-heavy: 2px solid var(--foreground);
  --gradient-brand: linear-gradient(135deg, var(--color-primary-500), var(--color-highlight-500));
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --background: #FFFFFF;
  --foreground: var(--color-neutral-950);
  --card: #FFFFFF;
  --card-foreground: var(--color-neutral-950);
  --popover: #FFFFFF;
  --popover-foreground: var(--color-neutral-950);
  --primary: var(--color-primary-600);
  --primary-foreground: #FFFFFF;
  --secondary: var(--color-neutral-100);
  --secondary-foreground: var(--color-neutral-900);
  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-600);
  --accent: var(--color-neutral-100);
  --accent-foreground: var(--color-neutral-900);
  --destructive: var(--color-danger-600);
  --destructive-foreground: #FFFFFF;
  --border: var(--color-neutral-200);
  --input: var(--color-neutral-500);
  --ring: var(--color-primary-500);
  --highlight: var(--color-highlight-500);
  --highlight-foreground: var(--color-neutral-950);
  --primary-subtle: var(--color-primary-50);
  --primary-subtle-foreground: var(--color-primary-800);
  --link: var(--color-primary-700);
  --success: var(--color-success-700);
  --success-foreground: #FFFFFF;
  --success-subtle: var(--color-success-50);
  --success-subtle-foreground: var(--color-success-800);
  --warning: var(--color-warning-400);
  --warning-foreground: var(--color-neutral-950);
  --warning-subtle: var(--color-warning-50);
  --warning-subtle-foreground: var(--color-warning-800);
  --info: var(--color-info-600);
  --info-foreground: #FFFFFF;
  --info-subtle: var(--color-info-50);
  --info-subtle-foreground: var(--color-info-800);
  --destructive-subtle: var(--color-danger-50);
  --destructive-subtle-foreground: var(--color-danger-800);
  --highlight-subtle: var(--color-highlight-50);
  --highlight-subtle-foreground: var(--color-highlight-800);
  --celebrate: var(--color-warning-700);
  --celebrate-subtle: var(--color-warning-50);
  --celebrate-subtle-foreground: var(--color-warning-800);
  --destructive-text: var(--color-danger-600);
  --primary-hover: var(--color-primary-700);
  --highlight-hover: var(--color-highlight-400);
  --destructive-hover: var(--color-danger-700);
}

/* Style tokens that point at colour tokens, declared again wherever the theme switches, so they
   resolve against the nearest theme (a .light panel inside a dark page, or the reverse). */
.dark, .light {
  --font-ui: var(--font-sans);
  --card-bg: var(--background);
  --card-border: var(--foreground);
  --btn-secondary-fg: var(--foreground);
  --btn-secondary-border: var(--foreground);
  --chip-fg: var(--foreground);
  --chip-border: var(--foreground);
  --nav-current-fg: var(--foreground);
  --nav-current-mark: inset 0 -2px 0 var(--primary);
  --tab-selected-mark: inset 0 -2px 0 var(--primary);
  --tablist-rule: inset 0 -1px 0 var(--border);
  --popover-border: var(--foreground);
  --popover-shadow: 6px 6px 0 0 var(--primary);
  --card-hover-border: var(--primary);
  --rule-heavy: 2px solid var(--foreground);
  --gradient-brand: linear-gradient(135deg, var(--color-primary-500), var(--color-highlight-500));
}

/* Dark theme */
.dark {
  color-scheme: dark;
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-50);
  --card: var(--color-neutral-900);
  --card-foreground: var(--color-neutral-50);
  --popover: var(--color-neutral-900);
  --popover-foreground: var(--color-neutral-50);
  --primary: var(--color-primary-600);
  --primary-foreground: #FFFFFF;
  --secondary: var(--color-neutral-800);
  --secondary-foreground: var(--color-neutral-50);
  --muted: var(--color-neutral-800);
  --muted-foreground: var(--color-neutral-400);
  --accent: var(--color-neutral-800);
  --accent-foreground: var(--color-neutral-50);
  --destructive: var(--color-danger-600);
  --destructive-foreground: #FFFFFF;
  --border: var(--color-neutral-800);
  --input: var(--color-neutral-500);
  --ring: var(--color-primary-400);
  --highlight: var(--color-highlight-400);
  --highlight-foreground: var(--color-neutral-950);
  --primary-subtle: var(--color-primary-950);
  --primary-subtle-foreground: var(--color-primary-200);
  --link: var(--color-primary-300);
  --success: var(--color-success-500);
  --success-foreground: var(--color-neutral-950);
  --success-subtle: var(--color-success-950);
  --success-subtle-foreground: var(--color-success-200);
  --warning: var(--color-warning-400);
  --warning-foreground: var(--color-neutral-950);
  --warning-subtle: var(--color-warning-950);
  --warning-subtle-foreground: var(--color-warning-200);
  --info: var(--color-info-500);
  --info-foreground: var(--color-neutral-950);
  --info-subtle: var(--color-info-950);
  --info-subtle-foreground: var(--color-info-200);
  --destructive-subtle: var(--color-danger-950);
  --destructive-subtle-foreground: var(--color-danger-200);
  --highlight-subtle: var(--color-highlight-950);
  --highlight-subtle-foreground: var(--color-highlight-200);
  --celebrate: var(--color-warning-300);
  --celebrate-subtle: var(--color-warning-950);
  --celebrate-subtle-foreground: var(--color-warning-200);
  --destructive-text: var(--color-danger-400);
  --primary-hover: var(--color-primary-700);
  --highlight-hover: var(--color-highlight-300);
  --destructive-hover: var(--color-danger-700);
}

/* The OS asks for dark and the page hasn't opted out with class="light". */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);
    --card: var(--color-neutral-900);
    --card-foreground: var(--color-neutral-50);
    --popover: var(--color-neutral-900);
    --popover-foreground: var(--color-neutral-50);
    --primary: var(--color-primary-600);
    --primary-foreground: #FFFFFF;
    --secondary: var(--color-neutral-800);
    --secondary-foreground: var(--color-neutral-50);
    --muted: var(--color-neutral-800);
    --muted-foreground: var(--color-neutral-400);
    --accent: var(--color-neutral-800);
    --accent-foreground: var(--color-neutral-50);
    --destructive: var(--color-danger-600);
    --destructive-foreground: #FFFFFF;
    --border: var(--color-neutral-800);
    --input: var(--color-neutral-500);
    --ring: var(--color-primary-400);
    --highlight: var(--color-highlight-400);
    --highlight-foreground: var(--color-neutral-950);
    --primary-subtle: var(--color-primary-950);
    --primary-subtle-foreground: var(--color-primary-200);
    --link: var(--color-primary-300);
    --success: var(--color-success-500);
    --success-foreground: var(--color-neutral-950);
    --success-subtle: var(--color-success-950);
    --success-subtle-foreground: var(--color-success-200);
    --warning: var(--color-warning-400);
    --warning-foreground: var(--color-neutral-950);
    --warning-subtle: var(--color-warning-950);
    --warning-subtle-foreground: var(--color-warning-200);
    --info: var(--color-info-500);
    --info-foreground: var(--color-neutral-950);
    --info-subtle: var(--color-info-950);
    --info-subtle-foreground: var(--color-info-200);
    --destructive-subtle: var(--color-danger-950);
    --destructive-subtle-foreground: var(--color-danger-200);
    --highlight-subtle: var(--color-highlight-950);
    --highlight-subtle-foreground: var(--color-highlight-200);
    --celebrate: var(--color-warning-300);
    --celebrate-subtle: var(--color-warning-950);
    --celebrate-subtle-foreground: var(--color-warning-200);
    --destructive-text: var(--color-danger-400);
    --primary-hover: var(--color-primary-700);
    --highlight-hover: var(--color-highlight-300);
    --destructive-hover: var(--color-danger-700);
    --font-ui: var(--font-sans);
    --card-bg: var(--background);
    --card-border: var(--foreground);
    --btn-secondary-fg: var(--foreground);
    --btn-secondary-border: var(--foreground);
    --chip-fg: var(--foreground);
    --chip-border: var(--foreground);
    --nav-current-fg: var(--foreground);
    --nav-current-mark: inset 0 -2px 0 var(--primary);
    --tab-selected-mark: inset 0 -2px 0 var(--primary);
    --tablist-rule: inset 0 -1px 0 var(--border);
    --popover-border: var(--foreground);
    --popover-shadow: 6px 6px 0 0 var(--primary);
    --card-hover-border: var(--primary);
    --rule-heavy: 2px solid var(--foreground);
    --gradient-brand: linear-gradient(135deg, var(--color-primary-500), var(--color-highlight-500));
  }
}

/* Forced light area: class="light" on any element inside a dark page. */
.light {
  color-scheme: light;
  --background: #FFFFFF;
  --foreground: var(--color-neutral-950);
  --card: #FFFFFF;
  --card-foreground: var(--color-neutral-950);
  --popover: #FFFFFF;
  --popover-foreground: var(--color-neutral-950);
  --primary: var(--color-primary-600);
  --primary-foreground: #FFFFFF;
  --secondary: var(--color-neutral-100);
  --secondary-foreground: var(--color-neutral-900);
  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-600);
  --accent: var(--color-neutral-100);
  --accent-foreground: var(--color-neutral-900);
  --destructive: var(--color-danger-600);
  --destructive-foreground: #FFFFFF;
  --border: var(--color-neutral-200);
  --input: var(--color-neutral-500);
  --ring: var(--color-primary-500);
  --highlight: var(--color-highlight-500);
  --highlight-foreground: var(--color-neutral-950);
  --primary-subtle: var(--color-primary-50);
  --primary-subtle-foreground: var(--color-primary-800);
  --link: var(--color-primary-700);
  --success: var(--color-success-700);
  --success-foreground: #FFFFFF;
  --success-subtle: var(--color-success-50);
  --success-subtle-foreground: var(--color-success-800);
  --warning: var(--color-warning-400);
  --warning-foreground: var(--color-neutral-950);
  --warning-subtle: var(--color-warning-50);
  --warning-subtle-foreground: var(--color-warning-800);
  --info: var(--color-info-600);
  --info-foreground: #FFFFFF;
  --info-subtle: var(--color-info-50);
  --info-subtle-foreground: var(--color-info-800);
  --destructive-subtle: var(--color-danger-50);
  --destructive-subtle-foreground: var(--color-danger-800);
  --highlight-subtle: var(--color-highlight-50);
  --highlight-subtle-foreground: var(--color-highlight-800);
  --celebrate: var(--color-warning-700);
  --celebrate-subtle: var(--color-warning-50);
  --celebrate-subtle-foreground: var(--color-warning-800);
  --destructive-text: var(--color-danger-600);
  --primary-hover: var(--color-primary-700);
  --highlight-hover: var(--color-highlight-400);
  --destructive-hover: var(--color-danger-700);
}

/* Motion: base and slow transitions drop to 0ms when the OS asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-base: 0ms; --duration-slow: 0ms; }
}

/* Base rules (theme.css's @layer base, without Tailwind) */
*, ::before, ::after {
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}
h1, h2, h3, h4 { font-family: var(--font-display); }
/* Display type always gets room for descenders. Never set a tighter line-height on it. */
h1, h2, h3, h4, .font-display, [data-slot="card-title"], [data-slot="dialog-title"] {
  line-height: var(--heading-leading);
}