/* Pagedepth design tokens. One source for the app, the marketing site and
 * emails. Values and the rules for using them are in README.md.
 * Light by default; dark follows the OS unless data-theme="light" is set,
 * and data-theme="dark" forces it. */

:root {
  color-scheme: light;

  /* Surfaces */
  --pd-paper: #fbfaf7;        /* page background */
  --pd-surface: #ffffff;      /* cards, tables, inputs, charts */
  --pd-surface-2: #f3f1eb;    /* sidebar, hover, code blocks */
  --pd-rule: #e6e2da;         /* hairlines */
  --pd-rule-strong: #cfc9bd;  /* input borders, table header rule */

  /* Ink */
  --pd-ink: #1a1a1a;          /* text, headings */
  --pd-ink-2: #4a4a46;        /* secondary text */
  --pd-muted: #6b6b66;        /* captions, labels, placeholders */

  /* Brand: ink navy, one accent, used for actions and the depth line */
  --pd-accent: #1f2d6e;
  --pd-accent-hover: #172256;
  --pd-accent-tint: #eceef6;
  --pd-on-accent: #ffffff;
  --pd-focus: #1f2d6e;

  /* Status: reserved, never series colours, always with an icon and words */
  --pd-positive: #2a7348;
  --pd-positive-tint: #e7f1ea;
  --pd-warning: #a3541a;
  --pd-warning-tint: #f8ebe0;
  --pd-negative: #b42318;
  --pd-negative-tint: #fbeae8;
  --pd-info: #0b6a85;
  --pd-info-tint: #e3f1f5;

  /* Charts (validated set, see README "Charts") */
  --pd-series-control: #8a877f; /* original, holdout */
  --pd-series-1: #2a78d6;       /* variant B */
  --pd-series-2: #eb6834;       /* variant C */
  --pd-series-3: #1baf7a;       /* variant D */
  --pd-grid: #e1e0d9;
  --pd-axis: #c3c2b7;

  /* Type */
  --pd-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pd-font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif; /* marketing headlines only */
  --pd-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pd-text-xs: 0.75rem;    /* 12 labels, overlines */
  --pd-text-sm: 0.875rem;   /* 14 tables, captions */
  --pd-text-md: 1rem;       /* 16 body */
  --pd-text-lg: 1.25rem;    /* 20 verdicts, section titles */
  --pd-text-xl: 1.5rem;     /* 24 page titles */
  --pd-text-2xl: 2rem;      /* 32 hero numbers */
  --pd-text-3xl: 2.75rem;   /* 44 marketing h2 */
  --pd-text-4xl: 3.75rem;   /* 60 marketing h1 */
  --pd-leading-tight: 1.2;
  --pd-leading: 1.55;

  /* Space: 4px steps */
  --pd-space-1: 4px;
  --pd-space-2: 8px;
  --pd-space-3: 12px;
  --pd-space-4: 16px;
  --pd-space-5: 24px;
  --pd-space-6: 32px;
  --pd-space-7: 48px;
  --pd-space-8: 64px;
  --pd-space-9: 96px;

  /* Shape and depth */
  --pd-radius-sm: 4px;      /* badges, inputs */
  --pd-radius: 6px;         /* buttons, cards */
  --pd-radius-lg: 10px;     /* dialogs, marketing panels */
  --pd-shadow: 0 1px 2px rgb(26 26 26 / 0.06), 0 1px 1px rgb(26 26 26 / 0.04);
  --pd-shadow-lg: 0 8px 24px rgb(26 26 26 / 0.10), 0 2px 6px rgb(26 26 26 / 0.06);

  /* Motion */
  --pd-fast: 120ms;
  --pd-base: 200ms;
  --pd-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --pd-sidebar: 240px;
  --pd-content: 960px;      /* app pages */
  --pd-prose: 680px;        /* text-heavy pages, docs */
  --pd-wide: 1200px;        /* marketing */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pd-paper: #121212;
    --pd-surface: #1a1a19;
    --pd-surface-2: #222220;
    --pd-rule: #2d2d2b;
    --pd-rule-strong: #3d3d3a;
    --pd-ink: #ededea;
    --pd-ink-2: #c4c4bf;
    --pd-muted: #a3a39e;
    --pd-accent: #a6b4ff;
    --pd-accent-hover: #bfc9ff;
    --pd-accent-tint: #161b33;
    --pd-on-accent: #0d1430;
    --pd-focus: #bfc9ff;
    --pd-positive: #6fc596;
    --pd-positive-tint: #15241b;
    --pd-warning: #e0965c;
    --pd-warning-tint: #2a1d12;
    --pd-negative: #f0857a;
    --pd-negative-tint: #2c1513;
    --pd-info: #7cc4d8;
    --pd-info-tint: #10232a;
    --pd-series-control: #8a877f;
    --pd-series-1: #3987e5;
    --pd-series-2: #d95926;
    --pd-series-3: #199e70;
    --pd-grid: #2c2c2a;
    --pd-axis: #383835;
    --pd-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --pd-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pd-paper: #121212;
  --pd-surface: #1a1a19;
  --pd-surface-2: #222220;
  --pd-rule: #2d2d2b;
  --pd-rule-strong: #3d3d3a;
  --pd-ink: #ededea;
  --pd-ink-2: #c4c4bf;
  --pd-muted: #a3a39e;
  --pd-accent: #a6b4ff;
  --pd-accent-hover: #bfc9ff;
  --pd-accent-tint: #161b33;
  --pd-on-accent: #0d1430;
  --pd-focus: #bfc9ff;
  --pd-positive: #6fc596;
  --pd-positive-tint: #15241b;
  --pd-warning: #e0965c;
  --pd-warning-tint: #2a1d12;
  --pd-negative: #f0857a;
  --pd-negative-tint: #2c1513;
  --pd-info: #7cc4d8;
  --pd-info-tint: #10232a;
  --pd-series-control: #8a877f;
  --pd-series-1: #3987e5;
  --pd-series-2: #d95926;
  --pd-series-3: #199e70;
  --pd-grid: #2c2c2a;
  --pd-axis: #383835;
  --pd-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --pd-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --pd-fast: 0ms; --pd-base: 0ms; }
}