/* ==========================================================================
   Priostack Apps design system - tokens.css
   --------------------------------------------------------------------------
   Every value the components use is a custom property defined here. The
   palette is derived from the priostack.com site tokens
   (examples/priostack/static/site/style.css): ink #152847, muted #53627b,
   blue #205bd7 / #1646a7, orange #da561e, line #dce3ef, wash #f3f6fc,
   paper #fff, soft #eaf1ff.

   Themes
   - Light is the default (:root).
   - Dark follows the OS (prefers-color-scheme: dark) unless the root carries
     data-theme="light".
   - data-theme="dark" forces dark and data-theme="light" forces light, on the
     root or on any element (a "theme island": the element repaints itself).
   - .ps-doc (invoice/quote sheet) is always light: it stands for paper.
   - Dark is screen-only, so printing is always light.
   The two dark blocks below must stay identical: tests/ds checks it.

   Contrast contract (checked by tests/ds/contrast.test.mjs, both themes)
     @contrast text  <fg> on <bg>...   WCAG 2.2 AA 1.4.3, at least 4.5:1
     @contrast large <fg> on <bg>...   large text (24px, or 18.66px bold), 3:1
     @contrast ui    <fg> on <bg>...   non-text (borders, focus, icons), 1.4.11, 3:1
     @decorative <token>...            exempt, with the reason on the line
   Every colour token must appear in a pair or be declared decorative, and
   every colour/background combination written in one rule of base.css or
   components.css must be one of the declared pairs.

   @contrast text  --ps-text on --ps-bg --ps-surface --ps-wash --ps-soft --ps-input-bg --ps-selection --ps-info-bg --ps-success-bg --ps-warning-bg --ps-danger-bg
   @contrast text  --ps-text-muted on --ps-bg --ps-surface --ps-wash --ps-soft --ps-input-bg
   @contrast text  --ps-link on --ps-bg --ps-surface --ps-wash --ps-soft --ps-info-bg --ps-success-bg --ps-warning-bg --ps-danger-bg
   @contrast text  --ps-link-hover on --ps-bg --ps-surface --ps-wash --ps-soft
   @contrast text  --ps-accent-text on --ps-bg --ps-surface --ps-wash --ps-warning-bg
   @contrast text  --ps-on-primary on --ps-primary --ps-primary-hover
   @contrast text  --ps-on-danger on --ps-danger --ps-danger-hover
   @contrast text  --ps-info-text on --ps-info-bg --ps-surface
   @contrast text  --ps-success-text on --ps-success-bg --ps-surface --ps-wash --ps-soft
   @contrast text  --ps-warning-text on --ps-warning-bg
   @contrast text  --ps-danger-text on --ps-danger-bg --ps-bg --ps-surface --ps-wash --ps-soft --ps-input-bg
   @contrast text  --ps-toast-text on --ps-toast-bg
   @contrast ui    --ps-control-border on --ps-bg --ps-surface --ps-wash --ps-soft --ps-input-bg
   @contrast ui    --ps-control-border-hover on --ps-bg --ps-surface --ps-wash --ps-input-bg
   @contrast ui    --ps-focus on --ps-bg --ps-surface --ps-wash --ps-soft
   @contrast ui    --ps-primary on --ps-bg --ps-surface --ps-wash
   @contrast ui    --ps-knob on --ps-primary --ps-control-border
   @contrast ui    --ps-info-border on --ps-info-bg
   @contrast ui    --ps-success-border on --ps-success-bg --ps-surface --ps-wash --ps-bg
   @contrast ui    --ps-warning-border on --ps-warning-bg
   @contrast ui    --ps-danger-border on --ps-danger-bg --ps-bg --ps-surface --ps-wash --ps-input-bg
   @decorative --ps-line --ps-line-strong  dividers and card edges; never the only cue that identifies a control
   @decorative --ps-accent  sparing highlight bars beside text that carries the meaning
   @decorative --ps-backdrop  dims the page behind a dialog; nothing is read on it

   Breakpoints (custom properties cannot be used inside @media/@container,
   so the queries repeat these literals; tests/ds checks that no others are used)
     viewport  600px  page gutters 24px
     viewport  900px  page gutters 32px, larger page head, site map in two columns
     viewport  1200px app page puts related apps and the house ad beside the tool; the hub its featured apps and the ad beside the list
     container 480px  roomier tool card and result panel; document head in two columns
     container 600px  header shows its text links and wide-only words
     container 720px  tool card switches to two columns (inputs | result)
     container 900px  editable rows switch from stacked cards to a table
   ========================================================================== */

:root {
  /* Type ---------------------------------------------------------------- */
  --ps-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ps-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ps-text-xs: 0.8125rem;                                   /* 13px meta */
  --ps-text-sm: 0.875rem;                                    /* 14px secondary */
  --ps-text-md: 1rem;                                        /* 16px body; every input (no iOS zoom) */
  --ps-text-lg: 1.125rem;                                    /* 18px lead */
  --ps-text-xl: 1.25rem;                                     /* 20px h3 */
  --ps-text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* 22 to 26px h2 */
  --ps-text-3xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);  /* 26 to 36px h1 */
  --ps-text-figure: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);    /* 32 to 44px result figure */

  --ps-leading-tight: 1.15;
  --ps-leading-snug: 1.35;
  --ps-leading: 1.6;

  --ps-weight-regular: 400;
  --ps-weight-medium: 500;
  --ps-weight-semibold: 600;
  --ps-weight-bold: 700;
  --ps-tracking-tight: -0.02em;

  /* Space: 4 8 12 16 24 32 48 64 ---------------------------------------- */
  --ps-space-1: 0.25rem;
  --ps-space-2: 0.5rem;
  --ps-space-3: 0.75rem;
  --ps-space-4: 1rem;
  --ps-space-5: 1.5rem;
  --ps-space-6: 2rem;
  --ps-space-7: 3rem;
  --ps-space-8: 4rem;

  /* Radii ---------------------------------------------------------------- */
  --ps-radius-sm: 6px;       /* inner segments, badges, sheets */
  --ps-radius-control: 8px;  /* inputs, buttons */
  --ps-radius-panel: 12px;   /* result panel, notices, toast, row cards */
  --ps-radius-card: 16px;    /* tool card, app cards */
  --ps-radius-pill: 999px;

  /* Sizes and layout ------------------------------------------------------ */
  --ps-target: max(44px, 2.75rem);   /* minimum touch target */
  --ps-control-height: var(--ps-target);
  --ps-control-height-sm: 2.25rem;   /* small controls, fine pointers only */
  --ps-container: 72rem;             /* 1152px of content */
  --ps-container-prose: 44rem;       /* reading measure */
  --ps-gutter: 16px;

  /* Motion: 150 ms transitions at most, nothing else ---------------------- */
  --ps-duration: 150ms;
  --ps-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Focus ring ----------------------------------------------------------- */
  --ps-focus-width: 3px;
  --ps-focus-offset: 2px;

  /* Layers --------------------------------------------------------------- */
  --ps-z-raised: 1;
  --ps-z-toast: 100;
}

@media (min-width: 600px) {
  :root { --ps-gutter: 24px; }
}

@media (min-width: 900px) {
  :root { --ps-gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ps-duration: 0ms; }
}

/* Light (default) -------------------------------------------------------- */
:root,
[data-theme="light"],
.ps-doc {
  color-scheme: light;

  /* surfaces */
  --ps-bg: #ffffff;                   /* site paper */
  --ps-surface: #ffffff;              /* cards */
  --ps-wash: #f3f6fc;                 /* site wash: result panel, footer, table heads */
  --ps-soft: #eaf1ff;                 /* site soft: brand tint, hover, current item */
  --ps-input-bg: #ffffff;
  --ps-selection: #cbdcff;

  /* lines */
  --ps-line: #dce3ef;                 /* site line */
  --ps-line-strong: #c3cfe2;
  --ps-control-border: #7586a2;       /* input, toggle, checkbox edges: 3:1 */
  --ps-control-border-hover: #53627b;

  /* text */
  --ps-text: #152847;                 /* site ink */
  --ps-text-muted: #53627b;           /* site muted */
  --ps-link: #205bd7;                 /* site blue */
  --ps-link-hover: #1646a7;           /* site blue-deep */
  --ps-accent-text: #a8411a;          /* orange for text: the site orange is 3.9:1 */

  /* brand fills */
  --ps-primary: #205bd7;
  --ps-primary-hover: #1646a7;
  --ps-on-primary: #ffffff;
  --ps-accent: #da561e;               /* site orange, non-text highlights */
  --ps-focus: #da561e;                /* focus ring */
  --ps-knob: #ffffff;                 /* toggle knob */

  /* status */
  --ps-info-bg: #eaf1ff;
  --ps-info-text: #1646a7;
  --ps-info-border: #205bd7;
  --ps-success-bg: #eaf7f0;
  --ps-success-text: #1d6a4c;
  --ps-success-border: #1f7a55;
  --ps-warning-bg: #fff3e5;
  --ps-warning-text: #8a3b0c;
  --ps-warning-border: #c2410c;
  --ps-danger-bg: #fdeeec;
  --ps-danger-text: #a3261c;
  --ps-danger-border: #c3352b;
  --ps-danger: #c3352b;
  --ps-danger-hover: #a12a21;
  --ps-on-danger: #ffffff;

  /* toast */
  --ps-toast-bg: #152847;
  --ps-backdrop: #15284799;           /* behind a dialog */
  --ps-toast-text: #ffffff;

  /* elevation */
  --ps-shadow-sm: 0 1px 2px rgb(21 40 71 / 0.08);
  --ps-shadow-md: 0 1px 2px rgb(21 40 71 / 0.04), 0 8px 24px rgb(28 56 104 / 0.08);
  --ps-shadow-lg: 0 12px 40px rgb(21 40 71 / 0.22);
}

/* Dark, from the OS ------------------------------------------------------ */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ps-bg: #0b1628;
    --ps-surface: #13213a;
    --ps-wash: #0f1b31;
    --ps-soft: #1a3059;
    --ps-input-bg: #0b1628;
    --ps-selection: #2c4f94;

    --ps-line: #26385a;
    --ps-line-strong: #34496f;
    --ps-control-border: #7084a8;
    --ps-control-border-hover: #94a6c4;

    --ps-text: #e8eef9;
    --ps-text-muted: #a7b4cb;
    --ps-link: #8fb3ff;
    --ps-link-hover: #b9d0ff;
    --ps-accent-text: #ff9b6b;

    --ps-primary: #2f6ae6;
    --ps-primary-hover: #2459cc;
    --ps-on-primary: #ffffff;
    --ps-accent: #ee7a43;
    --ps-focus: #f08a55;
    --ps-knob: #ffffff;

    --ps-info-bg: #13284d;
    --ps-info-text: #c3d6ff;
    --ps-info-border: #79a2ff;
    --ps-success-bg: #0f2a22;
    --ps-success-text: #a6e8c8;
    --ps-success-border: #4cc596;
    --ps-warning-bg: #2f210f;
    --ps-warning-text: #ffd2a6;
    --ps-warning-border: #f39a54;
    --ps-danger-bg: #34161a;
    --ps-danger-text: #ffbdb6;
    --ps-danger-border: #ff8a80;
    --ps-danger: #c9372c;
    --ps-danger-hover: #ab2c23;
    --ps-on-danger: #ffffff;

    --ps-toast-bg: #e8eef9;
    --ps-backdrop: #000000a6;
    --ps-toast-text: #152847;

    --ps-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ps-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
    --ps-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
  }
}

/* Dark, forced ----------------------------------------------------------- */
@media screen {
  [data-theme="dark"] {
    color-scheme: dark;

    --ps-bg: #0b1628;
    --ps-surface: #13213a;
    --ps-wash: #0f1b31;
    --ps-soft: #1a3059;
    --ps-input-bg: #0b1628;
    --ps-selection: #2c4f94;

    --ps-line: #26385a;
    --ps-line-strong: #34496f;
    --ps-control-border: #7084a8;
    --ps-control-border-hover: #94a6c4;

    --ps-text: #e8eef9;
    --ps-text-muted: #a7b4cb;
    --ps-link: #8fb3ff;
    --ps-link-hover: #b9d0ff;
    --ps-accent-text: #ff9b6b;

    --ps-primary: #2f6ae6;
    --ps-primary-hover: #2459cc;
    --ps-on-primary: #ffffff;
    --ps-accent: #ee7a43;
    --ps-focus: #f08a55;
    --ps-knob: #ffffff;

    --ps-info-bg: #13284d;
    --ps-info-text: #c3d6ff;
    --ps-info-border: #79a2ff;
    --ps-success-bg: #0f2a22;
    --ps-success-text: #a6e8c8;
    --ps-success-border: #4cc596;
    --ps-warning-bg: #2f210f;
    --ps-warning-text: #ffd2a6;
    --ps-warning-border: #f39a54;
    --ps-danger-bg: #34161a;
    --ps-danger-text: #ffbdb6;
    --ps-danger-border: #ff8a80;
    --ps-danger: #c9372c;
    --ps-danger-hover: #ab2c23;
    --ps-on-danger: #ffffff;

    --ps-toast-bg: #e8eef9;
    --ps-backdrop: #000000a6;
    --ps-toast-text: #152847;

    --ps-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ps-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
    --ps-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
  }
}