/* Code generated by tools/contract. DO NOT EDIT. */
/* Source: contract/ - change that and regenerate with: make code */

:root {
  color-scheme: light dark;
  --n-0: #0a0a0a;
  --n-1: #141414;
  --n-2: #1c1c1c;
  --n-3: #262626;
  --n-4: #383838;
  --n-5: #5c5c5c;
  --n-6: #9a9a9a;
  --n-7: #d0d0d0;
  --n-8: #e8e8e8;
  --n-9: #ffffff;

  --radius-full: 999px;
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-xl: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --type-2xl: 30px;
  --type-3xl: 40px;
  --type-base: 15px;
  --type-family: 'Manrope', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --type-lg: 19px;
  --type-md: 16px;
  --type-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;
  --type-sm: 13px;
  --type-xl: 23px;
  --type-xs: 12px;
  --density-comfortable: 1;
  --density-compact: 0.82;
  --motion-base: 220ms;
  --motion-drift: 9000ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 140ms;
  --motion-instant: 80ms;
  --motion-sheen: 2600ms;
  --motion-slow: 380ms;
  --motion-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-semibold: 600;
  --icon-lg: 24px;
  --icon-md: 20px;
  --icon-sm: 16px;
  --icon-stroke: 2.5;
  --icon-stroke-dot: 3.2;
}

/* Surfaces. Monochrome chrome by design: colour belongs to meaning. */
:root, [data-theme="light"] {
  --bg: #fafafa;
  --bg-sunken: #f0f0f0;
  --border: #e6e6e6;
  --border-strong: #cfcfcf;
  --inverse-bg: #0f0f0f;
  --inverse-text: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #0f0f0f;
  --text-muted: #5c5c5c;
  --shadow-hover: 0 2px 4px -2px rgb(0 0 0 / 0.09), 0 8px 20px -6px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.16), 0 4px 10px -4px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-rest: 0 1px 2px -1px rgb(0 0 0 / 0.07), 0 2px 6px -2px rgb(0 0 0 / 0.05);
  --shadow-ring: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --accent-graphite: #3d3d3d;
  --accent-slate: #3e5068;
  --accent-teal: #0e7c72;
  --accent-indigo: #4f46e5;
  --accent-amber: #b45309;
  --level-normal: #3f3f46;
  --level-attention: #b45309;
  --level-critical: #b91c1c;
}

[data-theme="dark"] {
  --bg: #0d0d0d;
  --bg-sunken: #050505;
  --border: #262626;
  --border-strong: #3a3a3a;
  --inverse-bg: #f2f2f2;
  --inverse-text: #0d0d0d;
  --surface: #161616;
  --surface-raised: #1f1f1f;
  --text: #f2f2f2;
  --text-muted: #a1a1a1;
  --shadow-hover: 0 8px 24px -8px rgb(0 0 0 / 0.7), inset 0 1px 0 0 rgb(255 255 255 / 0.07);
  --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.7);
  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.5);
  --shadow-rest: 0 1px 2px -1px rgb(0 0 0 / 0.5), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
  --shadow-ring: inset 0 1px 0 0 rgb(255 255 255 / 0.06);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --accent-graphite: #c9c9c9;
  --accent-slate: #93b4da;
  --accent-teal: #4fd1c5;
  --accent-indigo: #a5b4fc;
  --accent-amber: #fbbf24;
  --level-normal: #a1a1aa;
  --level-attention: #fcd34d;
  --level-critical: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d;
    --bg-sunken: #050505;
    --border: #262626;
    --border-strong: #3a3a3a;
    --inverse-bg: #f2f2f2;
    --inverse-text: #0d0d0d;
    --surface: #161616;
    --surface-raised: #1f1f1f;
    --text: #f2f2f2;
    --text-muted: #a1a1a1;
    --shadow-hover: 0 8px 24px -8px rgb(0 0 0 / 0.7), inset 0 1px 0 0 rgb(255 255 255 / 0.07);
    --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.7);
    --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.5);
    --shadow-rest: 0 1px 2px -1px rgb(0 0 0 / 0.5), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
    --shadow-ring: inset 0 1px 0 0 rgb(255 255 255 / 0.06);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --accent-graphite: #c9c9c9;
    --accent-slate: #93b4da;
    --accent-teal: #4fd1c5;
    --accent-indigo: #a5b4fc;
    --accent-amber: #fbbf24;
    --level-normal: #a1a1aa;
    --level-attention: #fcd34d;
    --level-critical: #fca5a5;
  }
}

/* The selected accent, resolved once so no component picks a colour. */
[data-accent="graphite"] { --accent: var(--accent-graphite); }
[data-accent="slate"] { --accent: var(--accent-slate); }
[data-accent="teal"] { --accent: var(--accent-teal); }
[data-accent="indigo"] { --accent: var(--accent-indigo); }
[data-accent="amber"] { --accent: var(--accent-amber); }

[data-density="comfortable"] { --density: var(--density-comfortable); }
[data-density="compact"] { --density: var(--density-compact); }

/* The brand gradient. Defined only inside its scope: where identity is
   what carries colour. In the rest of the interface that job belongs to
   the three levels, and an accent the person chose. */
:root {
  --brand-from: #d20707;
  --brand-to: #300586;
  --brand-angle: 135deg;
  --brand-gradient: linear-gradient(var(--brand-angle), var(--brand-from), var(--brand-to));
}

/* El extremo lejano del gradiente, aclarado en oscuro: el original
   sobre el fondo oscuro no llega a contraste de forma. */
:root[data-theme="dark"] { --brand-to: #7c3aed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-to: #7c3aed; }
}

/* A state carries a marker as well as a colour, because roughly one man
   in twelve cannot rely on the hue. */
[data-level="normal"] { color: var(--level-normal); }
[data-level="normal"]::after { content: " -"; }
[data-level="attention"] { color: var(--level-attention); }
[data-level="attention"]::after { content: " !"; }
[data-level="critical"] { color: var(--level-critical); }
[data-level="critical"]::after { content: " !!"; }

[data-level][data-marker]::after { content: " " attr(data-marker); }
[data-level][data-marker=""]::after { content: ""; }