/* tokens.css
   The fixed part of the look, shared by both brands: fonts, type scale, radii, spacing, motion,
   the one shadow and the status colours. The 17 colour properties at the top are only the first-paint
   values. core/theme.js replaces them with the values GET /context returns for this hostname. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dm-sans-600.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Per hostname (17). First-paint values: ink on white. */
  --bg: #FFFFFF;
  --surface: #EEF2FF;
  --surface-hover: #E1E7FB;
  --ink: #0B1026;
  --muted: #4A5169;
  --line: #D9DEEE;
  --field-border: #7C849E;
  --brand: #2B50FF;
  --brand-hover: #1F3FD9;
  --on-brand: #FFFFFF;
  --on-brand-muted: #E6EAFF;
  --link: #2B50FF;
  --accent: #FFC73B;
  --accent-hover: #FFD564;
  --on-accent: #0B1026;
  --inverse: #0B1026;
  --focus: #2B50FF;

  /* Fixed in the build. Text on the inverse (navy) panel, and the tonal circle inside a brand panel. */
  --on-inverse: #FFFFFF;
  --on-inverse-muted: #C9D0EA;
  --inverse-line: rgb(255 255 255 / .28);
  --brand-shape: rgb(11 16 38 / .14);

  /* Status pairs: text on tint. Status is always words plus an icon, never colour alone. */
  --success: #0B6B3A;  --success-bg: #E3F7EC;
  --warning: #7A4B00;  --warning-bg: #FFF3D1;
  --danger: #B3261E;   --danger-bg: #FBE9E7;
  --info: #1F3FD9;     --info-bg: #EEF2FF;
  --status-line: transparent;

  --font-head: "Sora", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;

  /* Type scale. Body is 17px so phones do not zoom into fields. */
  --t-h1: clamp(28px, 3.2vw, 40px);
  --t-h2: 24px;
  --t-h3: 19px;
  --t-body: 17px;
  --t-label: 15px;
  --t-small: 14px;

  /* Radius rule: interactive is a pill, inputs 14, cards 24, panels 28, feature panels 36. */
  --r-pill: 999px;
  --r-input: 14px;
  --r-card: 24px;
  --r-panel: 28px;
  --r-panel-lg: 36px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --max: 1440px;
  --gutter: 24px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* The one shadow. Floating layers only: toasts and dialogs. Cards and panels stay flat. */
  --shadow-float: 0 12px 28px rgb(11 16 38 / .28);

  /* Heights of the sticky bars, so focus is never hidden under them. Set by ui/shell.js when they change. */
  --banner-h: 0px;
  --bottombar-h: 0px;
}

/* Dark values, proposed from Ink Navy. Used when the person chose dark, or the system asks for it
   and the person has not chosen. Nothing depends on light-dark(). */
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0B1026;
  --surface: #141B3C;
  --surface-hover: #1B2450;
  --ink: #FFFFFF;
  --muted: #C9D0EA;
  --line: rgb(255 255 255 / .14);
  --field-border: #AEB7DA;
  --brand: #2B50FF;
  --brand-hover: #1F3FD9;
  --on-brand: #FFFFFF;
  --on-brand-muted: #E6EAFF;
  --link: #6F8BFF;
  --accent: #FFC73B;
  --accent-hover: #FFD564;
  --on-accent: #0B1026;
  --inverse: #141B3C;
  --focus: #FFFFFF;
  --success: #3DDC84;  --success-bg: #1B2450;
  --warning: #FFC73B;  --warning-bg: #1B2450;
  --danger: #FF8A80;   --danger-bg: #1B2450;
  --info: #6F8BFF;     --info-bg: #1B2450;
  --status-line: currentColor;
  --brand-shape: rgb(11 16 38 / .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    color-scheme: dark;
    --bg: #0B1026;
    --surface: #141B3C;
    --surface-hover: #1B2450;
    --ink: #FFFFFF;
    --muted: #C9D0EA;
    --line: rgb(255 255 255 / .14);
    --field-border: #AEB7DA;
    --link: #6F8BFF;
    --inverse: #141B3C;
    --focus: #FFFFFF;
    --success: #3DDC84;  --success-bg: #1B2450;
    --warning: #FFC73B;  --warning-bg: #1B2450;
    --danger: #FF8A80;   --danger-bg: #1B2450;
    --info: #6F8BFF;     --info-bg: #1B2450;
    --status-line: currentColor;
    --brand-shape: rgb(11 16 38 / .22);
  }
}

@media (max-width: 639px) {
  :root { --gutter: 16px; }
}