/*
 * base.css
 *
 * Foundation for the modern CSS pipeline. Two responsibilities:
 *
 *   1. Declare cascade layer order. `@layer base` is lowest priority,
 *      `@layer utilities` above that, and unlayered rules (today's BEM
 *      components in buttons.css, inputs.css, …) win against everything
 *      layered.
 *
 *   2. Define the global design tokens documented in
 *      docs/guides/style-guide.md. These were previously aspirational; this
 *      file makes them real so utilities.css and future component CSS can
 *      consume them. Tokens live on :root (unlayered) so they apply
 *      regardless of @layer position.
 *
 * Element-level baselines live here. Keep these reset rules low-specificity
 * and layered so BEM component CSS can continue to own final presentation.
 */

@layer base, utilities;

:root {
  /* Spacing — logical (block = vertical, inline = horizontal) */
  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;
  --inline-space: 1ch;
  --inline-space-half: 0.5ch;
  --inline-space-double: 2ch;

  /* Gap scale used by .gap-* / .stack / .cluster utilities */
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;

  /* Layout */
  --main-padding: clamp(1ch, 3vw, 3ch);
  --main-width: 1400px;

  /* Type scale (matches the table in style-guide.md) */
  --text-xx-small: 0.55rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 1.8rem;
  --text-xx-large: 2.5rem;

  /* Font stacks */
  --font-sans:
    "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  /* Semantic colors */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  --color-ink: oklch(20% 0 0);
  --color-ink-light: oklch(40% 0 0);
  --color-ink-lighter: oklch(60% 0 0);
  --color-ink-medium: oklch(75% 0 0);
  --color-ink-inverted: oklch(98% 0 0);
  --color-canvas: oklch(99% 0 0);
  --color-link: oklch(55% 0.16 250);
  --color-positive: oklch(58% 0.14 145);
  --color-negative: oklch(58% 0.18 25);
  --color-highlight: oklch(92% 0.16 95);
  --color-subtle: var(--color-ink-light);

  /* Status and accent colors */
  --color-brand: oklch(58.5% 0.233 277.117);
  --color-brand-strong: oklch(51.1% 0.262 276.966);
  --color-info: oklch(62.3% 0.214 259.815);
  --color-info-strong: oklch(54.6% 0.245 262.881);
  --color-success: oklch(72.3% 0.219 149.579);
  --color-success-strong: oklch(62.7% 0.194 149.214);
  --color-warning: oklch(79.5% 0.184 86.047);
  --color-danger: oklch(63.7% 0.237 25.331);
  --color-danger-strong: oklch(57.7% 0.245 27.325);
  --color-critical: oklch(58.6% 0.253 17.585);
  --color-accent: oklch(62.7% 0.265 303.9);
  --color-accent-strong: oklch(55.8% 0.288 302.321);

  /*
   * Named palette channel tokens.
   *
   * Use as `rgb(var(--palette-blue-100))` or with alpha as
   * `rgb(var(--palette-blue-100) / 0.5)`. These centralize the recurring
   * user-selectable swatches, calendar colors, and status accents without
   * introducing utility classes.
   */
  --palette-red-50: 254 242 242;
  --palette-red-100: 254 226 226;
  --palette-red-200: 254 202 202;
  --palette-red-300: 252 165 165;
  --palette-red-400: 248 113 113;
  --palette-red-700: 185 28 28;
  --palette-red-800: 153 27 27;
  --palette-red-900: 127 29 29;
  --palette-orange-100: 255 237 213;
  --palette-orange-200: 254 215 170;
  --palette-orange-300: 253 186 116;
  --palette-orange-400: 251 146 60;
  --palette-orange-500: 249 115 22;
  --palette-orange-600: 234 88 12;
  --palette-orange-700: 194 65 12;
  --palette-orange-800: 154 52 18;
  --palette-orange-900: 124 45 18;
  --palette-amber-50: 255 251 235;
  --palette-amber-100: 254 243 199;
  --palette-amber-200: 253 230 138;
  --palette-amber-300: 252 211 77;
  --palette-amber-400: 251 191 36;
  --palette-amber-500: 245 158 11;
  --palette-amber-600: 217 119 6;
  --palette-amber-700: 180 83 9;
  --palette-amber-800: 146 64 14;
  --palette-amber-900: 120 53 15;
  --palette-yellow-50: 254 252 232;
  --palette-yellow-100: 254 249 195;
  --palette-yellow-200: 254 240 138;
  --palette-yellow-300: 253 224 71;
  --palette-yellow-400: 250 204 21;
  --palette-yellow-600: 202 138 4;
  --palette-yellow-700: 161 98 7;
  --palette-yellow-800: 133 77 14;
  --palette-yellow-900: 113 63 18;
  --palette-lime-100: 236 252 203;
  --palette-lime-200: 217 249 157;
  --palette-lime-300: 190 242 100;
  --palette-lime-400: 163 230 53;
  --palette-lime-500: 132 204 22;
  --palette-lime-600: 101 163 13;
  --palette-lime-700: 77 124 15;
  --palette-lime-800: 63 98 18;
  --palette-lime-900: 54 83 20;
  --palette-green-50: 240 253 244;
  --palette-green-100: 220 252 231;
  --palette-green-200: 187 247 208;
  --palette-green-300: 134 239 172;
  --palette-green-400: 74 222 128;
  --palette-green-700: 21 128 61;
  --palette-green-800: 22 101 52;
  --palette-green-900: 20 83 45;
  --palette-emerald-100: 209 250 229;
  --palette-emerald-200: 167 243 208;
  --palette-emerald-300: 110 231 183;
  --palette-emerald-400: 52 211 153;
  --palette-emerald-500: 16 185 129;
  --palette-emerald-600: 5 150 105;
  --palette-emerald-700: 4 120 87;
  --palette-emerald-800: 6 95 70;
  --palette-emerald-900: 6 78 59;
  --palette-teal-50: 240 253 250;
  --palette-teal-100: 204 251 241;
  --palette-teal-200: 153 246 228;
  --palette-teal-300: 94 234 212;
  --palette-teal-400: 45 212 191;
  --palette-teal-500: 20 184 166;
  --palette-teal-600: 13 148 136;
  --palette-teal-700: 15 118 110;
  --palette-teal-800: 17 94 89;
  --palette-teal-900: 19 78 74;
  --palette-cyan-50: 207 250 254;
  --palette-cyan-200: 165 243 252;
  --palette-cyan-300: 103 232 249;
  --palette-cyan-400: 34 211 238;
  --palette-cyan-500: 6 182 212;
  --palette-cyan-600: 8 145 178;
  --palette-cyan-700: 14 116 144;
  --palette-cyan-800: 21 94 117;
  --palette-cyan-900: 22 78 99;
  --palette-sky-100: 224 242 254;
  --palette-sky-200: 186 230 253;
  --palette-sky-300: 125 211 252;
  --palette-sky-400: 56 189 248;
  --palette-sky-500: 14 165 233;
  --palette-sky-600: 2 132 199;
  --palette-sky-700: 3 105 161;
  --palette-sky-800: 7 89 133;
  --palette-sky-900: 12 74 110;
  --palette-blue-50: 239 246 255;
  --palette-blue-100: 219 234 254;
  --palette-blue-200: 191 219 254;
  --palette-blue-300: 147 197 253;
  --palette-blue-400: 96 165 250;
  --palette-blue-500: 59 130 246;
  --palette-blue-600: 37 99 235;
  --palette-blue-700: 29 78 216;
  --palette-blue-800: 30 64 175;
  --palette-blue-900: 30 58 138;
  --palette-indigo-50: 238 242 255;
  --palette-indigo-100: 224 231 255;
  --palette-indigo-200: 199 210 254;
  --palette-indigo-300: 165 180 252;
  --palette-indigo-400: 129 140 248;
  --palette-indigo-500: 99 102 241;
  --palette-indigo-600: 79 70 229;
  --palette-indigo-700: 67 56 202;
  --palette-indigo-800: 55 48 163;
  --palette-indigo-900: 49 46 129;
  --palette-violet-50: 245 243 255;
  --palette-violet-100: 237 233 254;
  --palette-violet-200: 221 214 254;
  --palette-violet-300: 196 181 253;
  --palette-violet-400: 167 139 250;
  --palette-violet-500: 139 92 246;
  --palette-violet-600: 124 58 237;
  --palette-violet-700: 109 40 217;
  --palette-violet-800: 91 33 182;
  --palette-purple-50: 250 245 255;
  --palette-purple-100: 243 232 255;
  --palette-purple-200: 233 213 255;
  --palette-purple-300: 216 180 254;
  --palette-purple-400: 192 132 252;
  --palette-purple-700: 126 34 206;
  --palette-purple-800: 107 33 168;
  --palette-purple-900: 88 28 135;
  --palette-fuchsia-50: 253 244 255;
  --palette-fuchsia-100: 250 232 255;
  --palette-fuchsia-200: 245 208 254;
  --palette-fuchsia-300: 240 171 252;
  --palette-fuchsia-400: 232 121 249;
  --palette-fuchsia-500: 217 70 239;
  --palette-fuchsia-700: 192 38 211;
  --palette-fuchsia-800: 162 28 175;
  --palette-fuchsia-900: 134 25 143;
  --palette-pink-50: 253 242 248;
  --palette-pink-100: 252 231 243;
  --palette-pink-200: 251 207 232;
  --palette-pink-300: 249 168 212;
  --palette-pink-400: 244 114 182;
  --palette-pink-500: 236 72 153;
  --palette-pink-600: 219 39 119;
  --palette-pink-700: 190 24 93;
  --palette-pink-800: 157 23 77;
  --palette-pink-900: 131 24 67;
  --palette-rose-50: 255 241 242;
  --palette-rose-100: 255 228 230;
  --palette-rose-200: 254 205 211;
  --palette-rose-300: 253 164 175;
  --palette-rose-400: 251 113 133;
  --palette-rose-500: 244 63 94;
  --palette-rose-600: 225 29 72;
  --palette-rose-700: 190 18 60;
  --palette-rose-800: 159 18 57;
  --palette-zinc-100: 244 244 245;
  --palette-zinc-200: 228 228 231;
  --palette-zinc-700: 63 63 70;
  --palette-neutral-50: 250 250 250;
  --palette-slate-50: 248 250 252;
  --palette-slate-100: 241 245 249;
  --palette-slate-200: 226 232 240;
  --palette-slate-300: 203 213 225;
  --palette-slate-400: 148 163 184;
  --palette-slate-500: 100 116 139;
  --palette-slate-600: 71 85 105;
  --palette-slate-700: 51 65 85;
  --palette-slate-800: 30 41 59;
  --palette-slate-900: 15 23 42;
  --palette-slate-950: 3 7 18;
  --palette-black: 0 0 0;
  --palette-emerald-50: 236 253 245;
  --palette-cyan-25: 236 254 255;

  /* Legacy product accents still used by older feature modules. */
  --palette-hq-blue-100: 242 242 250;
  --palette-hq-blue-200: 230 229 246;
  --palette-hq-blue-700: 16 3 163;
  --palette-hq-purple-100: 232 229 244;
  --palette-hq-indigo-600: 63 53 181;
  --palette-hq-teal-700: 61 139 139;
  --palette-hq-aqua-100: 198 237 244;
  --palette-hq-gold-700: 184 134 11;
  --palette-hq-pink-100: 252 223 230;
  --palette-hq-pink-300: 249 192 204;
  --palette-hq-rose-700: 191 78 103;
  --palette-hq-slate-800: 46 45 88;
  --palette-assistant-blue: 56 108 243;
  --palette-mint-50: 236 253 245;
  --palette-cream-50: 255 247 237;
  --palette-boost: 110 103 200;
  --palette-boost-strong: 91 84 181;
  --palette-boost-teal: 90 158 158;
  --palette-boost-gold: 212 168 75;
  --palette-boost-rose: 239 97 129;

  /* Surfaces and borders */
  --color-surface: oklch(var(--lch-white));
  --color-surface-muted: oklch(98.5% 0.002 247);
  --color-surface-subtle: oklch(96.7% 0.003 264);
  --color-border: oklch(92.8% 0.006 264);
  --color-border-muted: oklch(96.7% 0.003 264);
  --color-border-medium: oklch(87.2% 0.01 258);
  --color-border-strong: oklch(70.7% 0.022 261);

  /* Radius scale */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-pill: 9999px;

  /* Shadow scale */
  --shadow-sm: 0 1px 2px 0 oklch(var(--lch-black) / 5%);
  --shadow-md:
    0 4px 6px -1px oklch(var(--lch-black) / 10%),
    0 2px 4px -2px oklch(var(--lch-black) / 10%);
  --shadow-lg:
    0 10px 15px -3px oklch(var(--lch-black) / 10%),
    0 4px 6px -4px oklch(var(--lch-black) / 10%);
  --shadow-xl:
    0 20px 25px -5px oklch(var(--lch-black) / 10%),
    0 8px 10px -6px oklch(var(--lch-black) / 10%);
  --shadow-2xl: 0 25px 50px -12px oklch(var(--lch-black) / 25%);
  --shadow-panel:
    0 1px 3px 0 oklch(var(--lch-black) / 10%),
    0 1px 2px -1px oklch(var(--lch-black) / 10%);
  --shadow-inset-sm: inset 0 2px 4px 0 oklch(var(--lch-black) / 5%);
  --shadow-surface-outline: 0 0 0 2px var(--color-surface);
  --shadow-brand-outline: 0 0 0 2px var(--color-brand);
  --shadow-focus-soft: 0 0 0 4px rgb(var(--palette-indigo-100));
  --shadow-focus-brand: 0 0 0 3px rgb(var(--palette-indigo-200));
  --shadow-focus-brand-soft: 0 0 0 3px color-mix(in srgb, var(--color-brand) 25%, transparent);
  --shadow-ring-subtle: 0 0 0 1px oklch(16% 0.01 260 / 5%);

  /* Focus */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
}

@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--color-border);
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--font-sans);
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    margin: 0;
    line-height: inherit;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    text-decoration: underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  input:where([type="button"]),
  input:where([type="reset"]),
  input:where([type="submit"]) {
    appearance: button;
    background-color: transparent;
    background-image: none;
  }

  :-moz-focusring {
    outline: auto;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  progress {
    vertical-align: baseline;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration,
  ::-webkit-file-upload-button {
    appearance: none;
  }

  ::-webkit-file-upload-button {
    appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  ol,
  ul,
  menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  dialog {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-ink-lighter);
    opacity: 1;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  [hidden] {
    display: none;
  }

  [type="text"],
  input:where(:not([type])),
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    appearance: none;
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    border-width: 1px;
    border-radius: 0;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  [type="text"]:focus,
  input:where(:not([type])):focus,
  [type="email"]:focus,
  [type="url"]:focus,
  [type="password"]:focus,
  [type="number"]:focus,
  [type="date"]:focus,
  [type="datetime-local"]:focus,
  [type="month"]:focus,
  [type="search"]:focus,
  [type="tel"]:focus,
  [type="time"]:focus,
  [type="week"]:focus,
  [multiple]:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--focus-ring-color);
    box-shadow: 0 0 0 1px var(--focus-ring-color);
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-inline-end: 2.5rem;
    print-color-adjust: exact;
  }

  [multiple],
  [size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-inline-end: 0.75rem;
    print-color-adjust: unset;
  }

  [type="checkbox"],
  [type="radio"] {
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    vertical-align: middle;
    color: var(--focus-ring-color);
    background-color: var(--color-surface);
    background-origin: border-box;
    border-color: var(--color-border-strong);
    border-width: 1px;
    print-color-adjust: exact;
    user-select: none;
  }

  [type="checkbox"] {
    border-radius: 0;
  }

  [type="radio"] {
    border-radius: 100%;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow:
      var(--shadow-surface-outline),
      0 0 0 4px var(--focus-ring-color);
  }

  [type="checkbox"]:checked,
  [type="radio"]:checked {
    border-color: transparent;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  [type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  [type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  [type="checkbox"]:indeterminate {
    border-color: transparent;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  }

  [type="checkbox"]:checked:hover,
  [type="checkbox"]:checked:focus,
  [type="checkbox"]:indeterminate:hover,
  [type="checkbox"]:indeterminate:focus,
  [type="radio"]:checked:hover,
  [type="radio"]:checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }

  @media (forced-colors: active) {
    [type="checkbox"]:checked,
    [type="checkbox"]:indeterminate,
    [type="radio"]:checked {
      appearance: auto;
    }
  }

  [type="file"] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }

  [type="file"]:focus {
    outline: 1px auto -webkit-focus-ring-color;
  }

  .app-shell {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /*
   * Mobile responsiveness for the type scale, mirroring style-guide.md.
   * Slightly larger floor on small screens for readability.
   */
  @media (max-width: 640px) {
    :root {
      --text-xx-small: 0.65rem;
      --text-x-small: 0.85rem;
      --text-small: 0.95rem;
      --text-normal: 1.1rem;
      --text-medium: 1.2rem;
    }
  }
}