/* Design tokens. Every colour, radius and shadow used by the app. */

:root {
  --ps-orange: #d96532;
  --ps-orange-dark: #b74e22;
  --ps-teal: #247c8a;
  --ps-teal-dark: #155c67;
  --ps-charcoal: #344054;
  --ps-ink: #1f2937;
  --ps-muted: #667085;
  --ps-soft: #f8fafc;
  --ps-line: #dde3ea;
  --ps-line-strong: #c8d0da;
  --ps-white: #ffffff;
  --ps-blue: #2563eb;
  --ps-blue-soft: #dbeafe;
  --ps-green: #0e9f6e;
  --ps-red: #dc2626;
  --ps-purple: #6d5bd0;
  --ps-page: #f5f7fa;
  --ps-panel: #ffffff;
  --ps-sidebar: #f8fafc;
  --ps-sidebar-active: #eef6f8;
  --ps-header: #f8fafc;
  --ps-input: #fbfcfe;
  --ps-surface-soft: #f8fafc;
  --ps-accent-soft: #fff4ed;
  --ps-raised: #f8fafc;
  --ps-overlay: #ffffff;
  --ps-canvas: #fcfdff;
  --ps-row-hover: #fffaf6;
  --ps-grid: #f0ede8;
  --ps-faint: #87909c;
  --ps-orange-text: #b74e22;
  --ps-teal-text: #247c8a;
  --ps-teal-soft: #eef7f8;
  --ps-mix-base: #ffffff;
  --ps-dot: rgba(91, 112, 140, 0.12);
  /* Tinted surfaces. Light values are byte-identical to the colours they
     replaced; the dark values keep each tint's hue at the lightness of
     --ps-raised so tinted rows stay tinted instead of flattening to grey. */
  --ps-row-calc: #f6f8fb;
  --ps-row-section: #f7f4ff;
  --ps-row-growth: #f7fbff;
  --ps-row-preview: #e8f6ff;
  --ps-note-teal: #f4fbf9;
  --ps-matrix-head: #f4fbfa;
  --ps-tone-teal: #f0f8f9;
  --ps-tone-amber: #fff5ef;
  --ps-tone-blue: #f0f4ff;
  --ps-tone-green: #edf9f4;
  --ps-tone-teal-head: #e9f4f6;
  --ps-tone-violet-head: #eeecfa;
  --ps-tone-teal-sub: #f5fafb;
  --ps-tone-violet-sub: #f7f6fd;
  --ps-tone-amber-sub: #fdf9f1;
  --ps-matrix-corner: #f7f9fc;
  --ps-tone-amber-head: #fbf2e2;
  --ps-pill-neutral: #f2f1ee;
  --ps-table-btn: #f4f6f9;
  --shadow-soft: 0 14px 32px rgba(31, 41, 55, 0.07);
  --shadow-tight: 0 5px 14px rgba(31, 41, 55, 0.06);
  --radius: 8px;
  --shell-header-height: 94px;
}

/* Split-card modal: final overrides keep the compact grid intact at modal widths. */


/* Dark theme. Overrides token values only; light mode is the :root block above. */

/* Shared dark defaults. Every palette below inherits these and overrides only
   what it needs. A palette that omits one still gets a dark value rather than
   falling through to the light :root block. */
html:not([data-theme="light"]) {
  --ps-teal-dark: #5cc2cf;
  --ps-orange-dark: #f0854f;
  --ps-row-calc: #242d3a;
  --ps-row-section: #302644;
  --ps-row-growth: #1b2e40;
  --ps-row-preview: #16344a;
  --ps-note-teal: #163a34;
  --ps-matrix-head: #163a37;
  --ps-tone-teal: #123840;
  --ps-tone-amber: #3f2a1a;
  --ps-tone-blue: #222b48;
  --ps-tone-green: #14382e;
  --ps-tone-teal-head: #123841;
  --ps-tone-violet-head: #2d2745;
  --ps-tone-teal-sub: #173136;
  --ps-tone-violet-sub: #2a2540;
  --ps-tone-amber-sub: #372c14;
  --ps-matrix-corner: #242d3a;
  --ps-tone-amber-head: #3c2f14;
  --ps-pill-neutral: #2b2f33;
  --ps-blue-soft: #1f3350;
  --ps-table-btn: #242d3a;
}

/* Slate navy — the original dark palette. */
html[data-theme="slate"] {
  --ps-orange-text: #f0854f;
  --ps-teal-text: #4cbcce;
  --ps-charcoal: #eef3fb;
  --ps-ink: #d7deea;
  --ps-muted: #93a0b8;
  --ps-faint: #6e7b93;
  --ps-line: #2e374b;
  --ps-line-strong: #434c62;
  --ps-page: #0f172a;
  --ps-panel: #1b2336;
  --ps-sidebar: #141c2f;
  --ps-header: #141c2f;
  --ps-raised: #242c3f;
  --ps-overlay: #2c3447;
  --ps-input: #131b2e;
  --ps-canvas: #161e31;
  --ps-row-hover: #20283b;
  --ps-grid: #283144;
  --ps-surface-soft: #242c3f;
  --ps-sidebar-active: #1e3646;
  --ps-accent-soft: #3a2c2f;
  --ps-teal-soft: #21374a;
  --ps-blue: #6c9bff;
  --ps-green: #34d399;
  --ps-red: #f87171;
  --ps-purple: #a78bfa;
  --ps-mix-base: #1b2336;
  --ps-dot: rgba(148, 163, 184, 0.17);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.48);
  --shadow-tight: 0 4px 12px rgba(0, 0, 0, 0.36);
}

/* Obsidian — near-black, neutral cool. */
html[data-theme="obsidian"] {
  color-scheme: dark;
  --ps-orange-text: #f0854f;
  --ps-teal-text: #4cbcce;
  --ps-charcoal: #eff0f4;
  --ps-ink: #d9dbe1;
  --ps-muted: #9a9fac;
  --ps-faint: #757a87;
  --ps-line: #31333c;
  --ps-line-strong: #464851;
  --ps-page: #12141c;
  --ps-panel: #1e2028;
  --ps-sidebar: #161921;
  --ps-header: #161921;
  --ps-raised: #272931;
  --ps-overlay: #2e3038;
  --ps-input: #161820;
  --ps-canvas: #191b23;
  --ps-row-hover: #22242c;
  --ps-grid: #2b2d35;
  --ps-surface-soft: #272931;
  --ps-sidebar-active: #20323a;
  --ps-accent-soft: #3b2e2d;
  --ps-teal-soft: #24343e;
  --ps-blue: #6c9bff;
  --ps-green: #34d399;
  --ps-red: #f87171;
  --ps-purple: #a78bfa;
  --ps-mix-base: #1e2028;
  --ps-dot: rgba(160, 164, 178, 0.17);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.55);
  --shadow-tight: 0 4px 12px rgba(0, 0, 0, 0.42);

  /* Re-anchored to this palette's own --ps-raised lightness. */
  --ps-row-calc: #212a37;
  --ps-row-section: #2d2341;
  --ps-row-growth: #182b3d;
  --ps-row-preview: #133147;
  --ps-note-teal: #133731;
  --ps-matrix-head: #133734;
  --ps-tone-teal: #0e353d;
  --ps-tone-amber: #3c2717;
  --ps-tone-blue: #1f2845;
  --ps-tone-green: #11352b;
  --ps-tone-teal-head: #0e353e;
  --ps-tone-violet-head: #2a2442;
  --ps-tone-teal-sub: #142e33;
  --ps-tone-violet-sub: #27223d;
  --ps-tone-amber-sub: #342911;
  --ps-matrix-corner: #212a37;
  --ps-tone-amber-head: #392c11;
  --ps-pill-neutral: #282c30;
  --ps-blue-soft: #1c304d;
  --ps-table-btn: #212a37;
}

/* Zinc — true neutral grey, no blue cast. */
html[data-theme="zinc"] {
  color-scheme: dark;
  --ps-orange-text: #f0854f;
  --ps-teal-text: #4cbcce;
  --ps-charcoal: #f4f4f5;
  --ps-ink: #dedee0;
  --ps-muted: #9b9b9f;
  --ps-faint: #78787c;
  --ps-line: #38383b;
  --ps-line-strong: #4d4d50;
  --ps-page: #18181b;
  --ps-panel: #242427;
  --ps-sidebar: #1d1d20;
  --ps-header: #1d1d20;
  --ps-raised: #2d2d30;
  --ps-overlay: #353538;
  --ps-input: #1c1c1f;
  --ps-canvas: #1f1f22;
  --ps-row-hover: #29292c;
  --ps-grid: #313134;
  --ps-surface-soft: #2d2d30;
  --ps-sidebar-active: #26383c;
  --ps-accent-soft: #41322d;
  --ps-teal-soft: #29383d;
  --ps-blue: #6c9bff;
  --ps-green: #34d399;
  --ps-red: #f87171;
  --ps-purple: #a78bfa;
  --ps-mix-base: #242427;
  --ps-dot: rgba(170, 170, 175, 0.17);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.52);
  --shadow-tight: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Re-anchored to this palette's own --ps-raised lightness. */
  --ps-row-calc: #252e3b;
  --ps-row-section: #312745;
  --ps-row-growth: #1c2f41;
  --ps-row-preview: #17354b;
  --ps-note-teal: #173b35;
  --ps-matrix-head: #173b38;
  --ps-tone-teal: #133941;
  --ps-tone-amber: #402b1b;
  --ps-tone-blue: #232c49;
  --ps-tone-green: #15392f;
  --ps-tone-teal-head: #133942;
  --ps-tone-violet-head: #2e2846;
  --ps-tone-teal-sub: #183237;
  --ps-tone-violet-sub: #2b2641;
  --ps-tone-amber-sub: #382d15;
  --ps-matrix-corner: #252e3b;
  --ps-tone-amber-head: #3d3015;
  --ps-pill-neutral: #2c3034;
  --ps-blue-soft: #203451;
  --ps-table-btn: #252e3b;
}

/* Steel — lighter blue-grey. Its tints use its own accent hues. */
html[data-theme="steel"] {
  color-scheme: dark;
  --ps-orange-text: #f59563;
  --ps-teal-text: #5cc9da;
  --ps-charcoal: #f5f8fd;
  --ps-ink: #dee5f0;
  --ps-muted: #a2afc4;
  --ps-faint: #7f8da4;
  --ps-line: #3f4b5e;
  --ps-line-strong: #556175;
  --ps-page: #1e293b;
  --ps-panel: #2b3648;
  --ps-sidebar: #232e40;
  --ps-header: #232e40;
  --ps-raised: #354051;
  --ps-overlay: #3d4859;
  --ps-input: #232e3f;
  --ps-canvas: #263142;
  --ps-row-hover: #303b4c;
  --ps-grid: #394457;
  --ps-surface-soft: #354051;
  --ps-sidebar-active: #2c4657;
  --ps-accent-soft: #48393b;
  --ps-teal-soft: #2f4759;
  --ps-blue: #7aa5ff;
  --ps-green: #45dda6;
  --ps-red: #ff8f8f;
  --ps-purple: #b39dff;
  --ps-mix-base: #2b3648;
  --ps-dot: rgba(160, 178, 204, 0.18);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.42);
  --shadow-tight: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Re-anchored to this palette's own --ps-raised lightness. */
  --ps-teal-dark: #5cc9da;
  --ps-orange-dark: #f59563;
  --ps-row-calc: #37404e;
  --ps-row-section: #403a5a;
  --ps-row-growth: #343f55;
  --ps-row-preview: #364461;
  --ps-note-teal: #284d53;
  --ps-matrix-head: #2a4d53;
  --ps-tone-teal: #264c52;
  --ps-tone-amber: #553c2f;
  --ps-tone-blue: #313f5d;
  --ps-tone-green: #2b4c3d;
  --ps-tone-teal-head: #264c53;
  --ps-tone-violet-head: #403a59;
  --ps-tone-teal-sub: #2a4449;
  --ps-tone-violet-sub: #3d3854;
  --ps-tone-amber-sub: #533a2e;
  --ps-matrix-corner: #37404e;
  --ps-tone-amber-head: #593d2f;
  --ps-pill-neutral: #3f4247;
  --ps-blue-soft: #364565;
  --ps-table-btn: #37404e;
}