/* Tyreflow POS — designtokens
 * Enda källan till färger, typsnitt, radier och spacing.
 * Hårdkoda aldrig ett värde som finns här.
 */

:root {
  /* Text */
  --ink:        #1B1A16; /* brödtext, rubriker */
  --ink-2:      #56534A; /* sekundär text, inaktiva flikar */
  --ink-3:      #6E6A5E; /* hjälptext, metadata */
  --ink-4:      #8A8478; /* kolumnrubriker, versaletiketter */

  /* Ytor */
  --ground:     #F5F2EC; /* sidbakgrund (varm, inte kall grå) */
  --surface:    #FFFFFF; /* kort, paneler */
  --surface-2:  #FBFAF6; /* nedtonad yta: summeringsfot, radposter */
  --field:      #FCFBF8; /* inputbakgrund på vitt kort */
  --line:       #E4DED2; /* ramar */
  --line-soft:  #EFEAE0; /* avdelare inuti kort */

  /* Systemrad ("Du agerar som ...") */
  --bar:        #24211B;
  --bar-ink:    #E8E3D7;
  --bar-link:   #E0C79A;
  --bar-dot:    #E0A33E;

  /* Accent — en enda, används för aktiv flik, primärknapp och Ta betalt */
  --accent:        #1C5D4B;
  --accent-strong: #14442F;
  --accent-soft:   #E6EFEA;
  --accent-line:   #BFD5CB;

  /* Platsfärger i kalendern (Bur 1–3). Utöka mönstret vid fler platser. */
  --place-1:      #1C5D4B;
  --place-1-soft: #E7F0EB;
  --place-1-line: #BFD5CB;
  --place-1-ink:  #14442F;
  --place-2:      #2F5D7A;
  --place-2-soft: #E8EFF5;
  --place-2-line: #C3D4E0;
  --place-2-ink:  #23455C;
  --place-3:      #8A5A12;
  --place-3-soft: #F5EDDF;
  --place-3-line: #E0CDA8;
  --place-3-ink:  #6B4410;
  /* Utökat enligt DESIGN.md: samma mönster, fler platser. En salong har fem
     stolar. Tonerna är valda i samma mättnad och ljushet som 1–3. */
  --place-4:      #6B3B6E;
  --place-4-soft: #F1E9F2;
  --place-4-line: #DCC6DE;
  --place-4-ink:  #522C55;
  --place-5:      #1F5E63;
  --place-5-soft: #E5F0F1;
  --place-5-line: #BCD7D9;
  --place-5-ink:  #17474B;
  --place-6:      #7A4A2C;
  --place-6-soft: #F3EAE3;
  --place-6-line: #DFC8B6;
  --place-6-ink:  #5C3721;

  /* Status */
  --danger:      #A02C20;
  --danger-soft: #FBEDEB;

  /* Typsnitt */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Typskala */
  --text-xs:   11px; /* versaletiketter */
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px; /* inputvärden, listrader */
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-total: 30px; /* summabeloppet i kassan */

  /* Spacing (4/8-bas) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* Radier */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Kontroller */
  /* Kryssrutans ritade storlek. Klickytan är etiketten runt om,
     som fortfarande håller 40 px. */
  --check:        18px;

  --control-h:    44px; /* minsta klickyta */
  --control-h-sm: 40px; /* endast inuti en rad med annan text intill */
  --control-h-lg: 58px; /* Ta betalt */

  /* Skuggor — sparsamt */
  --shadow-card: 0 1px 2px rgba(27, 26, 22, 0.04);
  --shadow-panel: 0 2px 10px rgba(27, 26, 22, 0.05);
  --shadow-menu: 0 12px 28px rgba(27, 26, 22, 0.14);

  /* Layout */
  --page-max: 1360px;
  --page-pad: 40px;
}


/* ---------------------------------------------------------------------------
 * Mörkt läge
 *
 * Samma variabler, mörka värden. Tillagt av Claude Code — paketet levererades
 * ljust, och DESIGN.md säger att tokens är enda källan, så mörkret hör hemma
 * här och ingen annanstans.
 *
 * Neutralerna är gråa med en svag grön ton — Jonas 2026-09-20: bruna toner
 * kändes för varma i mörkt läge.
 * Accenten ljusnar: skogsgrönt mot mörk yta blir annars nästan svart.
 * ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]) {
    --ink:       #E6EAE7;
    --ink-2:     #A9B0AC;
    --ink-3:     #8B918E;
    --ink-4:     #727875;

    --ground:    #171B18;
    --surface:   #262B28;
    --surface-2: #303633;
    --field:     #1F2421;
    --line:      #3E4541;
    --line-soft: #343A37;

    --bar:       #0E1210;
    --bar-ink:   #E2E7E4;

    --accent:        #3E9C7E;
    --accent-strong: #63BFA0;
    --accent-soft:   #1B3830;
    --accent-line:   #2F5F4F;

    --place-1-soft: #1B3830; --place-1-line: #2F5F4F; --place-1-ink: #7FCFB2;
    --place-2-soft: #172C3A; --place-2-line: #2B4C63; --place-2-ink: #86BEE0;
    --place-3-soft: #352713; --place-3-line: #5B4423; --place-3-ink: #E0B471;
    --place-4-soft: #2E1F30; --place-4-line: #4E3651; --place-4-ink: #CFA3D2;
    --place-5-soft: #122C2E; --place-5-line: #234B4E; --place-5-ink: #82CBD0;
    --place-6-soft: #2E2119; --place-6-line: #4D392B; --place-6-ink: #D2A585;

    --danger:      #E5796B;
    --danger-soft: #3A201C;

    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-menu:  0 12px 28px rgba(0, 0, 0, 0.55);
  }
}

/* Samma värden när användaren valt mörkt själv, oavsett systemets inställning. */
:root[data-tema="morkt"] {
  --ink:       #E6EAE7;
  --ink-2:     #A9B0AC;
  --ink-3:     #8B918E;
  --ink-4:     #727875;

  --ground:    #171B18;
  --surface:   #262B28;
  --surface-2: #303633;
  --field:     #1F2421;
  --line:      #3E4541;
  --line-soft: #343A37;

  --bar:       #0E1210;
  --bar-ink:   #E2E7E4;

  --accent:        #3E9C7E;
  --accent-strong: #63BFA0;
  --accent-soft:   #1B3830;
  --accent-line:   #2F5F4F;

  --place-1-soft: #1B3830; --place-1-line: #2F5F4F; --place-1-ink: #7FCFB2;
  --place-2-soft: #172C3A; --place-2-line: #2B4C63; --place-2-ink: #86BEE0;
  --place-3-soft: #352713; --place-3-line: #5B4423; --place-3-ink: #E0B471;
  --place-4-soft: #2E1F30; --place-4-line: #4E3651; --place-4-ink: #CFA3D2;
  --place-5-soft: #122C2E; --place-5-line: #234B4E; --place-5-ink: #82CBD0;
  --place-6-soft: #2E2119; --place-6-line: #4D392B; --place-6-ink: #D2A585;

  --danger:      #E5796B;
  --danger-soft: #3A201C;

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-menu:  0 12px 28px rgba(0, 0, 0, 0.55);
}