/* WHOOM design tokens, "Stone & sage".
   Ljust tema som standard, mörkt via prefers-color-scheme eller data-theme="dark".
   Använd bara dessa variabler i komponenter, aldrig hårdkodade värden. */


:root {
  /* Typografi */
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-label: 11px;      /* versaler, letter-spacing var(--ls-label) */
  --fs-caption: 12px;
  --fs-small: 13px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-lead: 16px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --fs-timer: 36px;
  --ls-label: 0.06em;
  --ls-tight: -0.01em;
  --lh-body: 1.5;

  /* Avstånd (4/8-skala) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px;

  /* Radier */
  --r-sm: 10px;     /* små rutor, menyval */
  --r-input: 12px;  /* fält */
  --r-row: 14px;    /* listrader som ytor */
  --r-tile: 16px;   /* agentkort, små videorutor */
  --r-panel: 20px;  /* paneler, stora videorutor */
  --r-dialog: 24px;
  --r-pill: 999px;  /* alla knappar och chips */

  /* Höjder */
  --h-btn-sm: 34px;
  --h-btn: 44px;
  --h-btn-lg: 52px;   /* samtalskontroller, huvudknapp i fullskärmsvyer */
  --h-input: 44px;

  /* Skuggor (bara på överlägg) */
  --shadow-dialog: 0 24px 60px rgba(36, 38, 42, 0.25);
  --shadow-menu: 0 16px 40px rgba(36, 38, 42, 0.18);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18);
  --overlay: rgba(36, 38, 42, 0.42);
  --focus-ring: 0 0 0 3px var(--accent-soft);

  /* Färger, ljust tema */
  --bg: #EEECE8;              /* sidbakgrund */
  --surface: #F8F7F4;         /* paneler, dialoger */
  --surface-raised: #FFFFFF;  /* fält, bubblor, banner, menyer */
  --surface-sunken: #E6E3DE;  /* chips, segmentkontrollens bakgrund (#EEECE8 på surface) */
  --line: #E2DFD9;            /* avdelare */
  --line-strong: #CFCBC3;     /* fält- och knappkanter */
  --text: #24262A;
  --text-2: #4A4C50;
  --text-muted: #6A6C70;      /* minsta tillåtna för läsbar text */
  --text-faint: #8A8C90;      /* bara avklarat/överstruket och tidsstämplar */
  --primary-bg: #24262A;
  --primary-fg: #F8F7F4;
  --accent: #5E7B67;          /* salvia: talar-ring, progress, ikryssat, fokus */
  --accent-text: #4F6B58;     /* salvia som text på ljust */
  --accent-strong: #2F4536;   /* text på --accent-soft */
  --accent-soft: #DCE4DD;     /* statuschip "Godkänt", "kan" */
  --accent-tint: #E4EBE5;     /* "Bara Webbhuset"-ytor, sökträff */
  --danger-text: #7A2E1F;
  --danger-soft: #F7E6E2;
  --danger-line: #B5452F;
  --danger-dot: #C2412D;      /* olästa-prick */
  --warn-text: #6B4A1A;
  --warn-soft: #F3E9DA;
  --tile-1: #CFCBC3; --tile-2: #D8D4CC; --tile-3: #C6C2BA; /* video-platshållare */

  /* Agentfärger: färg (badge), tint (kortets bakgrund), text (namn på tint) */
  --agent-sage: #5E7B67;     --agent-sage-tint: #E4EBE5;     --agent-sage-text: #2F4536;
  --agent-ochre: #9A6B2E;    --agent-ochre-tint: #F3E9DA;    --agent-ochre-text: #6E4A1C;
  --agent-plum: #7E5277;     --agent-plum-tint: #EFE3EC;     --agent-plum-text: #5C3656;
  --agent-blue: #4F6D93;     --agent-blue-tint: #E2E9F2;     --agent-blue-text: #34506F;
  --agent-brick: #A8553D;    --agent-brick-tint: #F5E4DE;    --agent-brick-text: #7A3A27;
  --agent-graphite: #55575B; --agent-graphite-tint: #E6E6E7; --agent-graphite-text: #303235;
}

/* Mörkt tema: varm kol, inte blåsvart */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1B1C1A;
    --surface: #242522;
    --surface-raised: #2C2D2A;
    --surface-sunken: #33342F;
    --line: #353631;
    --line-strong: #4A4B46;
    --text: #ECEAE5;
    --text-2: #C4C2BC;
    --text-muted: #A3A19B;
    --text-faint: #8E8C86;
    --primary-bg: #ECEAE5;
    --primary-fg: #1B1C1A;
    --accent: #8FAE98;
    --accent-text: #9DBBA6;
    --accent-strong: #C2D8C8;
    --accent-soft: #2F3A32;
    --accent-tint: #283029;
    --danger-text: #F0B4A6;
    --danger-soft: #3A2622;
    --danger-line: #D9735C;
    --warn-text: #E8C88F;
    --warn-soft: #3A3122;
    --tile-1: #3B3C38; --tile-2: #33342F; --tile-3: #42433E;
    --overlay: rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --bg: #1B1C1A;
  --surface: #242522;
  --surface-raised: #2C2D2A;
  --surface-sunken: #33342F;
  --line: #353631;
  --line-strong: #4A4B46;
  --text: #ECEAE5;
  --text-2: #C4C2BC;
  --text-muted: #A3A19B;
  --text-faint: #8E8C86;
  --primary-bg: #ECEAE5;
  --primary-fg: #1B1C1A;
  --accent: #8FAE98;
  --accent-text: #9DBBA6;
  --accent-strong: #C2D8C8;
  --accent-soft: #2F3A32;
  --accent-tint: #283029;
  --danger-text: #F0B4A6;
  --danger-soft: #3A2622;
  --danger-line: #D9735C;
  --warn-text: #E8C88F;
  --warn-soft: #3A3122;
  --tile-1: #3B3C38; --tile-2: #33342F; --tile-3: #42433E;
  --overlay: rgba(0, 0, 0, 0.55);
}