/* ==========================================================================
   Time Tracker – design tokens  ("Pier")
   One source of truth for the web app. The macOS widget mirrors these values
   in widget/Theme.swift – keep both in sync.
   Theme: follows the OS (prefers-color-scheme). Force with <html data-theme="light|dark">.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --rail:        #EBEFF2;   /* sidebar */
  --bg:          #FAFBFB;   /* page */
  --surface:     #FFFFFF;   /* inputs, panels */
  --sunken:      #F1F4F6;   /* ruler track, chips, hover rows */

  /* ---- ink ---- */
  --ink:         #131B22;   /* primary text */
  --ink-2:       #44515D;   /* secondary text */
  --ink-3:       #66727E;   /* tertiary / meta (4.8:1 on --bg) */

  /* ---- lines ---- */
  --line:        #E0E5E9;   /* hairlines */
  --line-strong: #C9D0D6;   /* input borders */
  --tick:        #B4BDC5;   /* ruler ticks */

  /* ---- accent (UI chrome only – company colours stay the user's) ---- */
  --accent:      #17606B;   /* petrol */
  --accent-hover:#124B54;
  --accent-soft: #DCEBED;
  --on-accent:   #FFFFFF;

  /* ---- semantic ---- */
  --danger:      #B83227;
  --danger-soft: #F8E3E0;
  --warn:        #8A5A00;
  --warn-soft:   #F8EBCF;
  --ok:          #1F7A55;
  --ok-soft:     #DDF0E6;

  /* ---- shape ---- */
  --r-xs: 4px;    /* ticks, tags */
  --r-s:  8px;    /* inputs, buttons, chips */
  --r-m:  12px;   /* panels, flash messages */
  --r-l:  18px;   /* login panel */

  /* ---- elevation: borders first, shadow only for things that float ---- */
  --shadow-float: 0 1px 2px rgba(19, 27, 34, .06), 0 8px 24px -6px rgba(19, 40, 52, .18);

  /* ---- space (4-pt grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- type ---- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px;   /* captions, meta */
  --fs-s:  13px;   /* table cells, labels */
  --fs-m:  15px;   /* body */
  --fs-l:  17px;   /* lead, panel titles */
  --fs-xl: 22px;   /* section titles */
  --fs-2xl: 32px;  /* page title */
  --fs-num: 40px;  /* key numerals */
  --stretch-num: 78%;   /* condensed numerals = timecode feel */
  --stretch-ui: 100%;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;

  /* ---- layout ---- */
  --rail-w: 240px;
  --content-max: 880px;

  /* ---- company colour presets (picker). Any hex is allowed. ---- */
  --c-magenta: #D63FE0;
  --c-amber:   #F2A33A;
  --c-teal:    #1FB5A3;
  --c-blue:    #4C8DF6;
  --c-violet:  #8B6CF0;
  --c-coral:   #F0675A;
  --c-lime:    #8DBB3A;
  --c-slate:   #7C8A99;

  color-scheme: light;
}

/* dark values – declared twice (media query + explicit override) on purpose */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rail: #0B1014;  --bg: #0F1519;  --surface: #161D23;  --sunken: #1B242B;
    --ink: #E8EDF1;   --ink-2: #AAB5BF;   --ink-3: #8796A2;
    --line: #232D35;  --line-strong: #33404A;  --tick: #4A5864;
    --accent: #5CC0CD; --accent-hover: #7DD0DB; --accent-soft: #15353B; --on-accent: #06242A;
    --danger: #F0786B; --danger-soft: #3A1F1C;
    --warn: #E3B050;   --warn-soft: #382B10;
    --ok: #5CC79A;     --ok-soft: #14301F;
    --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -6px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rail: #0B1014;  --bg: #0F1519;  --surface: #161D23;  --sunken: #1B242B;
  --ink: #E8EDF1;   --ink-2: #AAB5BF;   --ink-3: #8796A2;
  --line: #232D35;  --line-strong: #33404A;  --tick: #4A5864;
  --accent: #5CC0CD; --accent-hover: #7DD0DB; --accent-soft: #15353B; --on-accent: #06242A;
  --danger: #F0786B; --danger-soft: #3A1F1C;
  --warn: #E3B050;   --warn-soft: #382B10;
  --ok: #5CC79A;     --ok-soft: #14301F;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -6px rgba(0, 0, 0, .55);
  color-scheme: dark;
}