/* ── tokens/typography.css ── */
/* Typography — Ukeou Cockpit
   Two families: Kaisei Tokumin (serif, headings/prices/quotes) + Zen Kaku Gothic New (sans, everything else).
   Schriften liegen LOKAL in assets/fonts/ und werden pro Seite über
   <link rel="stylesheet" href="/assets/fonts/fonts.css"> geladen.
   KEIN @import von fonts.googleapis.com — das übertrug die Besucher-IP an Google
   (LG München I, 20.01.2022, 3 O 17493/20). Nicht wieder einfügen. */

:root {
  /* Families */
  --font-sans: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-serif: "Kaisei Tokumin", serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale (px, calibrated from the product — not a synthetic ramp) */
  --fs-eyebrow: 11px;    /* uppercase section kickers, group labels */
  --fs-micro: 11.5px;    /* kbd, chips, tooltips */
  --fs-caption: 12.5px;  /* descriptions, meta captions */
  --fs-meta: 13px;       /* compact controls, counters */
  --fs-label: 13.5px;    /* form labels, secondary buttons */
  --fs-body: 14px;       /* body copy, inputs, nav */
  --fs-placeholder: 16px;/* composer placeholder line */
  --fs-h3: 21px;         /* card / brand serif */
  --fs-h2: 26px;         /* modal titles (serif) */
  --fs-price: 32px;      /* plan prices (serif) */

  /* Line heights */
  --lh-tight: 1.3; /* @kind font */
  --lh-body: 1.5; /* @kind font */
  --lh-relaxed: 1.6; /* @kind font */

  /* Tracking */
  --ls-eyebrow: .6px;    /* uppercase labels */
  --ls-wide: .7px;       /* section kickers */
}

/* Base type — Standard statt Utility-Klassen. Überschriften und Zitate sind serif,
   alles andere sans; Consumer brauchen dafür keine Klasse. Das `!important` auf
   .font-serif ist gewollt: Tailwind besitzt denselben Utility-Namen und würde die
   Marken-Serif auf Wortmarke, Kennzahlen und Preisen sonst überschreiben. */
body {
  font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6, blockquote {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
}
.font-serif {
  font-family: var(--font-serif) !important;
  font-weight: var(--fw-medium);
}
.font-sans {
  font-family: var(--font-sans) !important;
}

/* ── tokens/colors.css ── */
/* Colors — Ukeou Cockpit. Warm sumi-on-paper neutrals + a Japanese accent scale.
   Light = :root, Dark = html.theme-dark (and system pref via html.theme-system).
   Every text token meets WCAG 2.2 AA (>=4.5:1). Rule: neutral HOVER (--hover) is only
   shown on hover; the slightly stronger --sel marks persistent selected/active state. */
:root {
  /* Surfaces */
  --bg: #FAF9F5;          /* app / sidebar / paper */
  --card: #FEFDFB;        /* cards, tiles */
  --sel: #F1EFE5;         /* selected / active (nav, tab, circle, filter) */
  --hover: #F4F3EB;       /* neutral mouse hover (hover-only) */
  --rail: #F4F1E9;        /* settings nav rail */
  --tab-active: #FDFCF9;  /* segmented-tab active segment */
  --tinted-hover: #EAE6DA;/* hover of a tinted (non-white) chip/segment */

  /* Borders + lines */
  --border: #ECE7DC;      /* hairline */
  --border2: #EAE4D8;
  --border3: #EEE9DE;
  --divider: #F0EBE1;     /* row divider */
  --track: #EAE4D8;       /* progress track */
  --toggle-off: #DDD8CA;  /* switch off track (never red/beige-dark) */
  --stone: #DBD6C8;       /* empty step / dot */

  /* Text (all AA on --bg/--card/--sel) */
  --ink: #2B302C;         /* primary ~13:1 */
  --strong: #4a4a44;      /* emphasised ~8.5:1 */
  --body: #57564e;        /* body 6.4-7.3:1 */
  --meta: #6F6C60;        /* meta / labels 4.6-5.2:1 */
  --faint: #757165;       /* faintest 4.5-4.8:1 */

  /* Accent text tokens (semantic, themable) */
  --gold-tx: #7F6016;     /* gold text on gold banner */
  --shu-tx: #A83E27;      /* "needs you" / escalation */
  --ok-tx: #55743f;       /* moss / success text */
  --water-tx: #3f7268;    /* water / links */

  /* Soft status surfaces + borders */
  --warn-bg: #FAF1DC;  --warn-bd: #EDE6D2;
  --err-bg: #FCE8E6;   --err-bd: #EDD4CB;
  --ok-bg: #E9F0DE;    --ok-bd: #DDE7CC;
  --live-bg: #E6EEF0;

  /* Tooltip bubble (dark bubble in light mode) */
  --tt-bg: #2B302C;  --tt-fg: #F5F1E8;

  /* Desktop backdrop gradient */
  --grad1: #F6F2EA;  --grad2: #E9E3D8;

  /* Referral banner tint (rest / hover) */
  --refban: linear-gradient(100deg, rgba(92,122,68,.16), rgba(92,122,68,.04) 78%); /* @kind other */
  --refban-h: linear-gradient(100deg, rgba(92,122,68,.24), rgba(92,122,68,.08) 78%); /* @kind other */

  color-scheme: light;
}

/* ── Accent STRUCTURE colors — theme-independent (identical in both modes) ── */
:root {
  --pine: #37564A;        /* pine — primary buttons, panels, pills */
  --pine-hover: #2E4A3F;
  --moss: #839A6E;        /* moss — success/active fills, dots */
  --moss-dark: #55743f;
  --matcha: #C0CEA6;      /* soft moss fill / selection highlight */
  --water: #63A79D;       /* water — live / running */
  --gold: #DEAA48;        /* gold — warning / budget */
  --gold-icon: #b58f3d;
  --shu: #C64E33;         /* shu / torii — ONLY where a human is needed */
  --shu-dark: #A83E27;
}

html.theme-dark {
  --bg: #202723;  --card: #272F2A;  --sel: #333D37;  --hover: #2E3832;
  --rail: #1B221E;  --tab-active: #3A443D;  --tinted-hover: #3A443D;
  --border: #3A453E;  --border2: #3E4A43;  --border3: #333E37;
  --divider: #2E3831;  --track: #3A453E;  --toggle-off: #454F48;  --stone: #454F48;
  --ink: #ECE9DF;  --strong: #DAD5C8;  --body: #C3BEB1;  --meta: #B0AC9E;  --faint: #9C988C;
  --gold-tx: #E0B24E;  --shu-tx: #EC8B6F;  --ok-tx: #9CBE7E;  --water-tx: #84BDB2;
  --warn-bg: #332C1A;  --warn-bd: #4A4026;
  --err-bg: #33221F;   --err-bd: #5A3A32;
  --ok-bg: #232E1C;    --ok-bd: #33482F;  --live-bg: #1F2C2B;
  --tt-bg: #ECE9DF;  --tt-fg: #26302B;
  --grad1: #232B26;  --grad2: #171D19;
  --refban: linear-gradient(100deg, rgba(124,160,94,.22), rgba(124,160,94,.05) 78%); /* @kind other */
  --refban-h: linear-gradient(100deg, rgba(124,160,94,.32), rgba(124,160,94,.09) 78%); /* @kind other */
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html.theme-system {
    --bg: #202723;  --card: #272F2A;  --sel: #333D37;  --hover: #2E3832;
    --rail: #1B221E;  --tab-active: #3A443D;  --tinted-hover: #3A443D;
    --border: #3A453E;  --border2: #3E4A43;  --border3: #333E37;
    --divider: #2E3831;  --track: #3A453E;  --toggle-off: #454F48;  --stone: #454F48;
    --ink: #ECE9DF;  --strong: #DAD5C8;  --body: #C3BEB1;  --meta: #B0AC9E;  --faint: #9C988C;
    --gold-tx: #E0B24E;  --shu-tx: #EC8B6F;  --ok-tx: #9CBE7E;  --water-tx: #84BDB2;
    --warn-bg: #332C1A;  --warn-bd: #4A4026;
    --err-bg: #33221F;   --err-bd: #5A3A32;
    --ok-bg: #232E1C;    --ok-bd: #33482F;  --live-bg: #1F2C2B;
    --tt-bg: #ECE9DF;  --tt-fg: #26302B;
    --grad1: #232B26;  --grad2: #171D19;
    --refban: linear-gradient(100deg, rgba(124,160,94,.22), rgba(124,160,94,.05) 78%); /* @kind other */
    --refban-h: linear-gradient(100deg, rgba(124,160,94,.32), rgba(124,160,94,.09) 78%); /* @kind other */
    color-scheme: dark;
  }
}

/* ── tokens/spacing.css ── */
/* Spacing — Ukeou Cockpit. Calibrated to the product's real paddings
   (not snapped to a 4/8 grid). Use these for gaps and paddings. */
:root {
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 9px;    /* common control gap */
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;   /* card / row inner padding */
  --sp-8: 18px;
  --sp-9: 22px;   /* card padding (comfortable) */
  --sp-10: 26px;  /* section rhythm */

  /* Touch targets */
  --hit-min: 34px;    /* every interactive control */
  --hit-form: 44px;   /* large form fields */
}

/* ── tokens/radii.css ── */
/* Corner radii — Ukeou Cockpit. Soft, generous rounding; larger surfaces
   get larger radii. Chips/kbd small, cards medium, dialogs large. */
:root {
  --r-xs: 6px;    /* kbd, phase tags */
  --r-sm: 7px;    /* chips, status pills */
  --r-md: 9px;    /* buttons, compact selects, nav items */
  --r-lg: 11px;   /* icon buttons, form inputs, segmented container */
  --r-xl: 14px;   /* cards, popovers */
  --r-2xl: 16px;  /* composer card */
  --r-3xl: 18px;  /* dialogs */
  --r-pill: 20px; /* suggestion chips, alert count badge */
  --r-full: 999px;/* dots, avatars-circle */
}

/* ── tokens/shadows.css ── */
/* Elevation — Ukeou Cockpit. Soft warm-tinted shadows (sumi rgba), never pure black in light mode.
   In DARK mode, dialogs/palette need a ring (0 0 0 1px var(--border2)) PLUS a black-based shadow. */
:root {
  --sh-card: 0 1px 2px rgba(43,48,44,.05);              /* cards, chips */
  --sh-segment: 0 1px 2px rgba(43,48,44,.12);           /* active segment tab */
  --sh-composer: 0 3px 14px -6px rgba(43,48,44,.14);    /* composer card */
  --sh-popover: 0 22px 54px -16px rgba(43,48,44,.4);    /* account popover */
  --sh-tooltip: 0 6px 18px rgba(43,48,44,.2);           /* tooltip bubble */
  --sh-modal: 0 40px 100px -24px rgba(43,48,44,.5);     /* dialog */
  --sh-toast: 0 14px 38px rgba(43,48,44,.3);            /* toast */
  --sh-window: 0 10px 34px -14px rgba(43,48,44,.32);    /* app window frame */

  /* Dark-mode elevation ring — pair with a black-based shadow */
  --ring-dark: 0 0 0 1px var(--border2);
}

/* ── tokens/animations.css ── */
/* Motion — Ukeou Cockpit. Calm, quick eases. All animation is disabled under
   prefers-reduced-motion. Keyframes are shipped so consumers can reuse them by name. */
@keyframes risein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes washin { from { opacity: 0; } to { opacity: 1; } }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Gift, account menu — rests, then wobbles briefly at the end of a ~3.8s cycle */
@keyframes giftwobble { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-13deg); } 88% { transform: rotate(11deg); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(5deg); } 97% { transform: rotate(-2deg); } }
/* Gift, banner hover — front-loaded so it wobbles immediately on hover */
@keyframes giftshake { 0% { transform: rotate(0); } 3% { transform: rotate(-7deg); } 6% { transform: rotate(6deg); } 9% { transform: rotate(-4deg); } 12% { transform: rotate(3deg); } 15% { transform: rotate(-1deg); } 18%, 100% { transform: rotate(0); } }

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1); /* @kind other */
  --dur-fast: .14s; /* @kind other */
  --dur-base: .18s; /* @kind other */
  --dur-rise: .6s; /* @kind other */
  --tt-delay: .5s; /* @kind other */ /* tooltip appear delay */
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* Ukeou Cockpit — Design System entry point.
   Consumers link THIS one file. Import-list only; no rules here. */

/* Footer-Landschaft: unter 768px die 1200er Fassung (22 statt 47 KB). Die Fläche wird
   inline gesetzt, daher !important. Pfad relativ zu dieser Datei → /assets im Wurzelverzeichnis. */
@media (max-width: 767px) {
  .uk-footer-scene { background-image: url(/assets/footer-landscape-1200.webp) !important; }
}

/* SiteSearch-Trefferzeilen stehen in ul>li>a und fielen sonst unter die Fließtext-Link-
   Regel der Seiten (main li a{color:… !important}). Attribut-Selektor gewinnt gegen
   drei Typ-Selektoren; das !important ist gegen das !important dort nötig. */
[data-uk-sitesearch] a { text-decoration: none !important; color: inherit !important; }

/* Dasselbe für die Krümelspur: sie liegt in nav>ol>li>a und fiele sonst unter
   main li a{color:… !important} der Seiten. */
[data-uk-breadcrumb] a { text-decoration: none !important; color: var(--pine) !important; }
[data-uk-breadcrumb] a:hover { color: var(--pine-hover) !important; text-decoration: underline !important; text-decoration-color: #A8BCB3; text-underline-offset: 2px; }