/* Design tokens: handbook Appendix F. The ONLY place colours are written down.
   Components read the theme variables (--bg, --surface, --text, --primary, …) so one component
   works in every theme. Never hard-code a colour anywhere else. */

@font-face { font-family: Gloock; src: url(assets/drown/gloock.woff2) format('woff2'); font-display: block }
@font-face { font-family: Hanken; src: url(assets/drown/hanken-400.woff2) format('woff2'); font-weight: 400; font-display: block }
@font-face { font-family: Hanken; src: url(assets/drown/hanken-500.woff2) format('woff2'); font-weight: 500 700; font-display: block }

:root {
  /* F.2 drown palette: the layers of a cup, crema at the top to roast at the bottom */
  --crema: #EFE2CD; --oat: #D9BE98; --caramel: #CF8E4E; --ember: #A5563A; --tobacco: #7B3B26; --roast: #24120C;
  --paper: #F7EFE1; --paper-2: #FBF6EC; --roast-2: #2E1A12; --roast-3: #3A2318;
  --line-dark: rgba(239,226,205,.14); --line-light: rgba(36,18,12,.14);
  --text-soft-dark: rgba(239,226,205,.66); --text-soft-light: rgba(36,18,12,.62);

  /* F.3 status: separate from brand colours, always paired with a word or icon */
  --ok: #5E9E6E; --warn: #E0A63A; --danger: #E0573F; --info: #6F97B8;

  /* F.6 group theme (CRM and anything shared by all brands) */
  --g-bg: #F5F2EE; --g-surface: #FFFFFF; --g-surface-2: #FAF8F5; --g-ink: #1E1A17; --g-soft: #6F6760; --g-line: #E3DDD6; --g-accent: #24120C;

  /* F.6 brand chips (always shown with the brand name written) */
  --chip-drown-bg: #CF8E4E;    --chip-drown-fg: #24120C;
  --chip-zav-bg: #3A2419;      --chip-zav-fg: #F7F0E5;
  --chip-mk-salon-bg: #A47282; --chip-mk-salon-fg: #FFFFFF;

  /* F.4 type, F.5 shape and spacing */
  --font-ui: Hanken, system-ui, sans-serif; --font-display: Gloock, Georgia, serif;
  --r-chip: 999px; --r-btn: 14px; --r-card: 18px; --r-sheet: 24px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --touch: 56px;
  --fs-body: 18px; --fs-small: 15px; --fs-label: 13px; --fs-title: 30px; --fs-number: 48px;
  --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 150ms; --t-med: 220ms;
}

/* drown dark: POS default, KDS always */
[data-theme="drown-dark"] {
  --bg: var(--roast); --surface: var(--roast-2); --surface-2: var(--roast-3);
  --text: var(--crema); --text-soft: var(--text-soft-dark); --line: var(--line-dark);
  --primary: var(--caramel); --on-primary: var(--roast); --accent: var(--oat);
  --focus: var(--caramel); --overlay: rgba(36,18,12,.72); --font-title: var(--font-display);
  color-scheme: dark;
}
/* drown light: back office, optional POS daytime */
[data-theme="drown-light"] {
  --bg: var(--paper); --surface: var(--paper-2); --surface-2: #F1E6D3;
  --text: var(--roast); --text-soft: var(--text-soft-light); --line: var(--line-light);
  --primary: var(--roast); --on-primary: var(--crema); --accent: var(--tobacco);
  --focus: var(--caramel); --overlay: rgba(36,18,12,.42); --font-title: var(--font-display);
  color-scheme: light;
}
/* group: CRM admin and shared customer pages */
[data-theme="group"] {
  --bg: var(--g-bg); --surface: var(--g-surface); --surface-2: var(--g-surface-2);
  --text: var(--g-ink); --text-soft: var(--g-soft); --line: var(--g-line);
  --primary: var(--g-accent); --on-primary: var(--g-bg); --accent: var(--g-soft);
  --focus: var(--g-accent); --overlay: rgba(30,26,23,.36);
  --font-title: var(--font-ui); /* neutral: Gloock is drown's voice, the group screens serve every brand */
  color-scheme: light;
}
/* KDS sizes (F.4) */
[data-app="kds"] { --fs-body: 22px; --fs-small: 18px; --fs-label: 15px; --fs-number: 64px; }
/* desk apps (back office, CRM): 44 px targets instead of 56 */
[data-density="desk"] { --touch: 44px; }

body { background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.45 var(--font-ui); }