/* Design tokens — the Power Solutions palette, pixel-sampled from the logo.
 *
 * Green is structure, orange is emphasis, lime is a soft tint, charcoal is
 * secondary text. Light and dark both defined here; every later stylesheet
 * consumes these variables and never hard-codes a colour.
 *
 * There is no CSS framework and no build step (HARD RULE 8) — this file is the
 * whole design system.
 */

:root {
  /* Brand */
  --ps-green: #286D44;
  --ps-green-deep: #1B4F30;
  --ps-green-tint: #EFF5F0;
  --ps-orange: #F58634;
  --ps-orange-deep: #DC6F1B;
  --ps-lime: #A8CF45;
  --ps-lime-tint: #F6FAE9;
  --ps-charcoal: #373435;

  /* Semantic — light */
  --bg: #FCFCFB;
  --surface: #FFFFFF;
  --surface-sunken: var(--ps-green-tint);
  --border: #E3E6E3;
  --ink: #1A1C1A;
  --ink-muted: var(--ps-charcoal);
  --ink-faint: #6B706C;
  --accent: var(--ps-green);
  --accent-ink: #FFFFFF;
  --emphasis: var(--ps-orange);
  /* The same emphasis, for a BORDER or an icon rather than for text or a fill.
     WCAG 2.2 SC 1.4.11 wants 3:1 out of a graphic that carries state, and the
     brand orange on white measures 2.52:1 — so the deep orange (3.32:1) does
     that job in light mode. Dark mode's emphasis is already 8.15:1 and keeps
     it. Only for state edges; the orange the owner recognises is --emphasis. */
  --emphasis-edge: var(--ps-orange-deep);
  --ok: #1F7A4D;
  --warn: var(--ps-orange-deep);
  --danger: #B3261E;
  /* A QR's quiet zone (the Settings Security card, S1): white in BOTH modes,
     so no dark-mode value below. A scanner reads dark modules on light. */
  --qr-ground: #FFFFFF;

  /* The day page's washes (DAY-PAGE-PLAN §3). The brand constants are not
     redefined for dark mode, so each tint carries its own dark value below.
     Text on tinted cards uses --ink or --ink-muted, never --ink-faint. */
  --tint-money: var(--ps-green-tint);   /* the expense card wash */
  --tint-move: #E6ECF3;                 /* the Move wash — the one hue outside
                                           the brand the MOCKUP keeps */
  --tint-warn: #FEEEE3;                 /* the Planned-today strip */
  --warn-ink: #A3520F;                  /* orange TEXT: 5.57:1 on white,
                                           4.92:1 on the tint */
  --tint-chosen: var(--ps-green-tint);  /* a chosen category, the synced pill
                                           (F8): the brand tint in light mode,
                                           which has no dark value of its own */
  --tint-link: var(--ps-lime-tint);     /* a name chip in the compose: the
                                           lime tint, dark value below */

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas,
    monospace;
  /* The date's face: a serif with no download and no CSP change. */
  --font-display: Georgia, "Noto Serif", "Times New Roman", serif;

  /* The type scale below 1rem (increment S; the owner on his Android phone,
     2026-10-10: "the view is looking very small"). Four steps, in rem, and a
     stylesheet names the STEP, never a size, so the floor is kept in one
     place. On a phone — everything narrower than the desk — content is 16 px,
     its second lines 15 and 14, and nothing is under 12:

       --text-base  what a card, a row or a sentence says     16  (was 15)
       --text-md    a card's second line, a chip, a nav link  15  (was 14)
       --text-sm    meta lines, captions, small labels        14  (was 13)
       --text-xs    column heads, badges, the tab labels      12  (was 12 and 11)

     The desk (1100px and wider, below) keeps the sizes it was approved at —
     its three panes are narrow — with the same 12 px floor. */
  --text-base: 1rem;
  --text-md: 0.9375rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Space — a 4px base, so a touch target is 11 units */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* The phone is the default target: 44px minimum touch target. */
  --touch: 2.75rem;
  /* Android asks 48 px of a control; used where the extra 4 px cost nothing
     (the More menu's rows, the desktop-site notice's button). */
  --touch-lg: 3rem;
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --shadow-card: 0 1px 2px rgb(26 28 26 / 6%), 0 4px 12px rgb(26 28 26 / 5%);
  /* The tab bar's full height — the dock is anchored this far above the
     viewport's foot (day-page A). S: an icon over its label in a 56 px link
     (Android's bottom navigation), + 1px border + the phone notch. */
  --tabs-link-h: 3.5rem;
  --tabs-h: calc(var(--tabs-link-h) + 1px + env(safe-area-inset-bottom, 0px));
  --shadow-dock: 0 -4px 16px rgb(26 28 26 / 10%);
  /* A list that opens over the page (the phone header's More menu, S). */
  --shadow-pop: 0 2px 6px rgb(26 28 26 / 8%), 0 12px 28px rgb(26 28 26 / 16%);

  /* The three-pane desktop layout appears here (§3.8). */
  --bp-desktop: 1100px;
  /* The side column appears here (increment S, step 2): from 720px a tablet,
     an unfolded foldable or a wide window shows the desk's left pane beside
     the day. A phone on its side does not (desktop-spec.js paneTier). Like
     --bp-desktop it is here to be named; a media query writes 720px out. */
  --bp-side: 720px;

  /* A line of running text: about 75 characters, the most the eye follows
     back to the next line's start. A `ch` is the width of a 0, a quarter
     wider than the average letter, so 60 of them hold about 75 characters.
     For sentences, never for a row of a list or a table. */
  --measure: 60ch;
}

/* The desk's type steps: the sizes its panes were drawn and approved at (the
 * number is --bp-desktop; a media query cannot read a custom property). Only
 * the floor moved: what was 11 px is 12 here too. */
@media (min-width: 1100px) {
  :root {
    --text-base: 0.9375rem;
    --text-md: 0.875rem;
    --text-sm: 0.8125rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12140F;
    --surface: #1A1D18;
    --surface-sunken: #161A15;
    --border: #2C312B;
    --ink: #ECEFE9;
    --ink-muted: #B6BDB4;
    --ink-faint: #838B81;
    --accent: #4E9C6D;
    --accent-ink: #08120C;
    --emphasis: #FF9B4F;
    --emphasis-edge: #FF9B4F;
    --ok: #5FBF8B;
    --warn: #FFB068;
    --danger: #F2857C;
    --tint-money: #1E3525;
    /* F8 (NEXT-PLAN §4): the plan's own fallback (DAY-PAGE-PLAN §3) — #1F2B36
       measured 1.18:1 against --surface and read as no wash at all; this is
       1.34:1, level with the money wash's 1.29:1. */
    --tint-move: #243447;
    /* The dark money wash: --ok on it is 5.85:1 (the synced pill) and --ink
       11.37:1 (a chosen category); on the light tint they were 2.04:1 and
       1.05:1, because --ps-green-tint has no dark value. */
    --tint-chosen: #1E3525;
    /* The compose's name chips (review of F, finding 5): --ink on the light
       lime tint was 1.09:1 in dark. On this dark lime it is 10.46:1, and the
       chip stands 1.40:1 off --surface, level with the Move and warn washes. */
    --tint-link: #2D3A17;
    --tint-warn: #452F19;
    --warn-ink: #FFB068;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
    --shadow-dock: 0 -4px 16px rgb(0 0 0 / 45%);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / 45%), 0 12px 28px rgb(0 0 0 / 55%);
  }
}

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