/* Daywell design tokens — the one place colors, fonts, spacing and shapes live.
   The admin Appearance screen overrides a few of these at runtime (see js/theme.js). */

/* Apercu is licensed for internal use, so it isn't served publicly. js/auth.js loads it from
   private storage after sign-in. Until then (sign-in screen, demo) the free DM Sans stands in. */

:root {
  /* Brand */
  --brand: #034d63;          /* sidebar, headings links, outline buttons (supplied) */
  --brand-deep: #023646;     /* active nav row, hover */
  --action: #dd0033;         /* primary action buttons, today marker, forecast line */
  --action-deep: #b8002a;
  --aqua: #3eb1c8;           /* info badges, actual-series lines, chart highlight */
  --sun: #e35205;            /* Daywell sun mark and warm accents (palette orange) */

  /* Brand palette (supplied). Primary: red + white. Secondary: navy, crimson, slate, warm grays.
     Tertiary: the accent set used for charts, departments and status tints. */
  --p-navy: #004f71; --p-crimson: #970d2c; --p-slate: #5b6770; --p-stone: #d9d6cf; --p-mist: #eeedeb;
  --p-aqua: #3eb1c8; --p-sky: #a6cbd6; --p-red: #ff1e43; --p-orange: #e35205; --p-salmon: #fa9370; --p-blush: #f8c1b8;
  --p-teal: #00635b; --p-green: #249e6b; --p-sage: #b5cfae; --p-gold: #ffb549; --p-butter: #f5e1a4; --p-cream: #fff7e6;
  --p-plum: #5d3754; --p-mauve: #994878;

  /* Neutrals */
  --bg: #eeedeb;             /* page background (palette warm gray) */
  --surface: #ffffff;        /* cards */
  --surface-2: #f6f5f3;      /* inset rows, table heads */
  --ink: #23323a;            /* main text */
  --ink-2: #5b6770;          /* secondary text (palette slate) */
  --muted: #69747c;          /* labels — still AA on white */
  --line: #e4e2dd;
  --line-strong: #d9d6cf;    /* palette stone */

  /* Status (always paired with text/icon). Text shades are the palette colors, darkened only
     where needed so small text stays readable. */
  --ok: #00635b;      --ok-bg: #e2efe0;     /* palette teal on a sage tint — good */
  --warn: #a83c00;    --warn-bg: #fff1d6;   /* palette orange on a gold tint — needs a look */
  --bad: #970d2c;     --bad-bg: #fde4e4;    /* palette crimson on a blush tint — problem */
  --info: #004f71;    --info-bg: #e2f0f4;   /* palette navy on a sky tint */
  --idle: #5b6770;    --idle-bg: #eeedeb;   /* palette slate on mist */

  /* Chart series (palette) */
  --series-1: #3eb1c8; --series-2: #004f71; --series-3: #994878; --series-4: #fa9370; --series-5: #e35205;
  --series-ly: #ffb549; --series-ly2: #f5e1a4;

  /* Type */
  --font-body: 'Apercu', 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: 'Apercu', 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --w-body: 400; --w-label: 500; --w-head: 700; --w-number: 500;
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 36px; --fs-num: 44px;

  /* Space, shape, depth */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(16, 32, 40, .06), 0 1px 1px rgba(16, 32, 40, .04);
  --shadow-lg: 0 18px 60px rgba(3, 77, 99, .18);
  --sidebar-w: 248px; --sidebar-w-collapsed: 76px;
  --col-bg: #e7eaed;         /* board columns */
  --sample-bg: #fff4d6; --sample-ink: #6b4800; --sample-line: #d9a62e;
  --planned-bg: #efe9f7; --planned-ink: #4b2f7a; --planned-line: #9a7cc8;
  color-scheme: light;
}

/* Dark mode — each person turns it on for themselves (profile, or the moon button at the top).
   Brand, sidebar and background colors are set by js/app.js so admin color choices still apply. */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: #11171a;
  --surface: #1a2227; --surface-2: #222c32;
  --ink: #e7ecee; --ink-2: #aab5bb; --muted: #95a1a8;
  --line: #2c383f; --line-strong: #3b4a52;
  --col-bg: #151c20;
  --ok: #5cc9a7;   --ok-bg: #173229;
  --warn: #ffb36b; --warn-bg: #3a2814;
  --bad: #ff8a9d;  --bad-bg: #3d1a22;
  --info: #8fd0e6; --info-bg: #15303b;
  --idle: #aab5bb; --idle-bg: #2a343a;
  --series-ly2: #8a7a4a;
  --sample-bg: #3a2f12; --sample-ink: #f3d68b; --sample-line: #8a6d24;
  --planned-bg: #2b2340; --planned-ink: #cdb8f2; --planned-line: #6c56a0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .55);
}