/* ============================================================================
   Pomy side panel — design tokens
   ----------------------------------------------------------------------------
   The single source of the panel's design values. Load this FIRST and once;
   nothing below should be redefined further down the cascade.

   design-system/theme.js writes the runtime half: MODES supply
   --pomy-canvas … --pomy-ring-track, ACCENTS supply --pomy-accent … --pomy-break.
   ========================================================================= */

:root {
  /* ---- Type -------------------------------------------------------------- */
  --pomy-font: Geist, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pomy-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --pomy-text-timer: 500 39px/1 var(--pomy-font-mono);   /* letter-spacing -.035em */
  --pomy-text-active: 600 16px/1.25 var(--pomy-font);    /* letter-spacing -.012em */
  --pomy-text-title: 600 15.5px/1.25 var(--pomy-font);   /* letter-spacing -.012em */
  --pomy-text-row: 500 13.5px/1.3 var(--pomy-font);
  --pomy-text-control: 500 12.5px/1.3 var(--pomy-font);
  --pomy-text-meta: 400 11.5px/1.35 var(--pomy-font);
  --pomy-text-code: 500 10.5px/1.2 var(--pomy-font-mono); /* letter-spacing .02em */
  --pomy-text-cap: 600 10px/1.2 var(--pomy-font);         /* uppercase, .1em */

  /* ---- Space, geometry --------------------------------------------------- */
  --pomy-gutter: 16px;          /* single horizontal inset for the whole panel */
  --pomy-row-h: 48px;           /* every selectable / navigable row */
  --pomy-topbar-h: 46px;
  --pomy-hit-min: 30px;         /* ghost + trailing controls */
  --pomy-hit-primary: 44px;     /* timer primary action */

  /* The approved panel uses a wider set than the four headline steps, so each
     one is named for the thing it belongs to. A component should never carry a
     literal radius; if a new one is needed, it is added here first. */
  --pomy-r-chip: 5px;      /* checkbox, mono code chip */
  --pomy-r-check: 5px;     /* alias kept for the four-step scale */
  --pomy-r-tight: 6px;     /* progress chip, Clear, settings segment option */
  --pomy-r-quiet: 7px;     /* back link, sheet close, swatch, segment thumb */
  --pomy-r-control: 8px;   /* ghost and secondary controls */
  --pomy-r-input: 9px;     /* search field, stepper, settings nav and action */
  --pomy-r-field: 10px;    /* primary buttons, sheet options, ambient row */
  --pomy-r-raised: 11px;   /* notice mark, meta list, swap block, toast */
  --pomy-r-block: 12px;    /* the dashed empty-Today block */
  --pomy-r-sheet: 15px;    /* dialog */
  --pomy-r-sheet-top: 16px;/* the bottom sheet's top corners */
  --pomy-r-pill: 999px;

  /* The one shadow the design draws inside a control rather than under it. */
  --pomy-lift-knob: 0 1px 2px rgba(20, 22, 26, .22);
  /* The colour picker's own surfaces. These are raw colour by definition — a
     hue spectrum and the white and black ramps over it are not theme values and
     must not shift with the theme — so they are declared here rather than left
     as literals inside a component. */
  --pomy-picker-spectrum: linear-gradient(to right,
    #FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%,
    #0000FF 67%, #FF00FF 83%, #FF0000 100%);
  --pomy-picker-shade: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
  --pomy-picker-tint: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
  --pomy-handle-edge: #FFFFFF;
  --pomy-handle-ring: rgba(20, 22, 26, .3);

  /* A hairline inside a colour swatch, so a pale one still has an edge. */
  --pomy-swatch-edge: inset 0 0 0 1px rgba(20, 22, 26, .16);

  --pomy-ring-size: 168px;
  --pomy-ring-stroke: 6px;
  --pomy-ring-circumference: 490.1; /* 2πr, r = 78 */

  /* ---- Motion ------------------------------------------------------------ */
  --pomy-ease: cubic-bezier(.2, .8, .2, 1);
  --pomy-t-state: 120ms;   /* selection, hover, toggle */
  --pomy-t-enter: 200ms;   /* sheet, dialog, toast */
  --pomy-t-ring: 400ms;    /* stroke-dashoffset interpolation */
}

/* ---- Light -------------------------------------------------------------- */
:root,
[data-pomy-mode="light"] {
  --pomy-canvas: #FFFFFF;
  --pomy-surface: #F6F7F8;
  --pomy-surface-soft: #FAFBFB;
  --pomy-raised: #FFFFFF;
  --pomy-thumb: #FFFFFF;   /* the selected half of a segmented control */
  --pomy-line: #E7E8EC;
  --pomy-line-soft: #F0F1F3;
  --pomy-line-strong: #C9CDD3;
  --pomy-ink: #14161A;
  --pomy-muted: #5F6570;
  --pomy-faint: #696F79;   /* caps labels, quiet data — clears 4.5:1 on surface */
  --pomy-decor: #8F959E;   /* chevrons + outlines only, never text */
  --pomy-ring-track: #ECEEF0;
  --pomy-skeleton: #E9EBEE;
  --pomy-done-fill: #E4E6E9;
  --pomy-done-mark: #6C737C;
  --pomy-switch-off: #D2D5DA;
  --pomy-knob: #FFFFFF;
  --pomy-scrim: rgba(20, 22, 26, .32);
  --pomy-toast-bg: #1A1D22;
  --pomy-toast-fg: #F7F8F9;
  --pomy-lift-accent: 0 2px 8px rgba(245, 183, 43, .28);
  --pomy-lift-bar: 0 -8px 20px rgba(20, 22, 26, .05);
  --pomy-lift-sheet: 0 18px 44px rgba(20, 22, 26, .20);
  --pomy-lift-chip: 0 1px 2px rgba(20, 22, 26, .10);
}

/* ---- Dark --------------------------------------------------------------- */
[data-pomy-mode="dark"] {
  --pomy-canvas: #101216;
  --pomy-surface: #191C21;
  --pomy-surface-soft: #15181C;
  --pomy-raised: #1B1F25;
  /* A lift shadow separates nothing on a dark ground, so the selected
     segment is a real step lighter than its track, not two points of it. */
  --pomy-thumb: #2C323B;
  --pomy-line: #262A31;
  --pomy-line-soft: #1E2228;
  --pomy-line-strong: #3A4048;
  --pomy-ink: #EFF1F3;
  --pomy-muted: #9AA1AB;
  --pomy-faint: #8A9199;
  --pomy-decor: #6E757F;
  --pomy-ring-track: #22262C;
  --pomy-skeleton: #22262C;
  --pomy-done-fill: #2A2E35;
  --pomy-done-mark: #9AA1AB;
  --pomy-switch-off: #3A4048;
  --pomy-knob: #EFF1F3;
  --pomy-scrim: rgba(0, 0, 0, .58);
  --pomy-toast-bg: #EFF1F3;
  --pomy-toast-fg: #14161A;
  --pomy-lift-accent: 0 2px 10px rgba(245, 183, 43, .22);
  --pomy-lift-bar: 0 -8px 20px rgba(0, 0, 0, .28);
  --pomy-lift-sheet: 0 18px 44px rgba(0, 0, 0, .52);
  --pomy-lift-chip: 0 1px 2px rgba(0, 0, 0, .34);
  --pomy-lift-knob: 0 1px 2px rgba(0, 0, 0, .38);
  --pomy-swatch-edge: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pomy-mode]) {
    --pomy-canvas: #101216;
    --pomy-surface: #191C21;
    --pomy-surface-soft: #15181C;
    --pomy-raised: #1B1F25;
    /* A lift shadow separates nothing on a dark ground, so the selected
       segment is a real step lighter than its track, not two points of it. */
    --pomy-thumb: #2C323B;
    --pomy-line: #262A31;
    --pomy-line-soft: #1E2228;
    --pomy-line-strong: #3A4048;
    --pomy-ink: #EFF1F3;
    --pomy-muted: #9AA1AB;
    --pomy-faint: #8A9199;
    --pomy-decor: #6E757F;
    --pomy-ring-track: #22262C;
    --pomy-skeleton: #22262C;
    --pomy-done-fill: #2A2E35;
    --pomy-done-mark: #9AA1AB;
    --pomy-switch-off: #3A4048;
    --pomy-knob: #EFF1F3;
    --pomy-scrim: rgba(0, 0, 0, .58);
    --pomy-toast-bg: #EFF1F3;
    --pomy-toast-fg: #14161A;
  }
}

/* ---- Accent ------------------------------------------------------------- *
 * The accent is the only saturated colour in the interface, so it carries a
 * single meaning: this is where focus is. Break phases use --pomy-break.
 * Swap the four blocks below from ACCENTS in lib/themes.js.               */

:root,
[data-pomy-accent="yellow"] {
  --pomy-accent: #F5B72B;
  --pomy-on-accent: #1A1C20;
  --pomy-accent-text: #8A6008;          /* accent-coloured text on canvas, AA */
  --pomy-accent-wash: rgba(245, 183, 43, .13);
  --pomy-accent-line: rgba(245, 183, 43, .42);
  --pomy-accent-line-strong: rgba(245, 183, 43, .70);
  --pomy-accent-halo: rgba(245, 183, 43, .24);
  --pomy-break: #1B8F55;
  --pomy-on-break: #FFFFFF;
}
[data-pomy-mode="dark"][data-pomy-accent="yellow"],
[data-pomy-mode="dark"] {
  --pomy-accent-text: #E7AE2E;
  --pomy-accent-wash: rgba(245, 183, 43, .11);
  --pomy-accent-line: rgba(245, 183, 43, .30);
  --pomy-accent-line-strong: rgba(245, 183, 43, .58);
  --pomy-accent-halo: rgba(245, 183, 43, .20);
  --pomy-break: #31BE79;
}
[data-pomy-accent="green"]  { --pomy-accent: #22C55E; --pomy-on-accent: #FFFFFF; --pomy-accent-text: #14663A; --pomy-break: #C2891B; --pomy-on-break: #1A1C20; }
[data-pomy-accent="blue"]   { --pomy-accent: #5B8DEF; --pomy-on-accent: #FFFFFF; --pomy-accent-text: #2F5CB3; --pomy-break: #1B8F55; --pomy-on-break: #FFFFFF; }
[data-pomy-accent="purple"] { --pomy-accent: #9079DE; --pomy-on-accent: #FFFFFF; --pomy-accent-text: #5B45A8; --pomy-break: #C2891B; --pomy-on-break: #1A1C20; }

/* ---- Phase -------------------------------------------------------------- *
 * The three timer phases each have their own tone, and one token carries
 * whichever is current. The ring, the round dots and the phase caption all read
 * that single token, so a phase can never be half-coloured.
 *   Focus       the focus accent
 *   Short break the counter-tone, so rest never reads as focus
 *   Long break  the anchor, strong and restful, distinct from both       */
:root {
  --pomy-longbreak: var(--pomy-ink);
  --pomy-on-longbreak: var(--pomy-canvas);
  --pomy-phase-tone: var(--pomy-accent);
}
[data-pomy-phase="work"] { --pomy-phase-tone: var(--pomy-accent); }
[data-pomy-phase="short_break"] { --pomy-phase-tone: var(--pomy-break); }
[data-pomy-phase="long_break"] { --pomy-phase-tone: var(--pomy-longbreak); }

/* ---- Status ------------------------------------------------------------- *
 * Red appears on exactly one element: the 40px mark inside a failure notice.
 * Body copy in an error state stays --pomy-ink / --pomy-muted.            */
:root {
  --pomy-danger: #B8382F;
  --pomy-on-danger: #FFFFFF;
  --pomy-danger-wash: rgba(184, 56, 47, .09);
  --pomy-danger-line: rgba(184, 56, 47, .28);
}
[data-pomy-mode="dark"] {
  --pomy-danger: #E8756B;
  /* Dark mode's red is a light red, so white on it reads at about 2.9:1. The
     label takes the dark ink instead, exactly as it does on the gold accent. */
  --pomy-on-danger: #17191C;
  --pomy-danger-wash: rgba(232, 117, 107, .11);
  --pomy-danger-line: rgba(232, 117, 107, .28);
}

/* ---- Panel base --------------------------------------------------------- */
html, body {
  margin: 0;
  background: var(--pomy-canvas);
  color: var(--pomy-ink);
  font: var(--pomy-text-meta);
  font-family: var(--pomy-font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* Keyboard focus is always visible and always the same. */
/* One focus ring, everywhere. :where() keeps specificity at zero so a component
   can move it inward when a clipping parent would cut it off — it must never
   restyle the element itself, so no radius is set here. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pomy-accent);
  outline-offset: 2px;
}

[data-pomy-scroll]::-webkit-scrollbar { width: 8px; height: 8px; }
[data-pomy-scroll]::-webkit-scrollbar-thumb { background: rgba(130, 138, 150, .34); border-radius: 8px; }
[data-pomy-scroll]::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}