/* Global tokens, reset, and document foundation. Page styles are loaded separately. */

:root {
  color-scheme: light;

  /* Typography */
  --font-family-body:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* Type scale */
  --font-size-micro: 0.625rem;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-meta: 0.875rem;
  --font-size-md: 0.95rem;
  --font-size-base: 1rem;
  --font-size-reading: 1.05rem;
  --font-size-heading-sm: 1.2rem;
  --font-size-title-sm: 1.35rem;
  --font-size-title: 1.5rem;
  --font-size-title-lg: 1.75rem;
  --font-size-display-sm: 2rem;
  --font-size-display: 2.25rem;
  /* Type roles */
  --font-size-body: var(--font-size-reading);
  --font-size-control: var(--font-size-base);
  --font-size-label: var(--font-size-sm);
  --font-size-small: var(--font-size-meta);
  --font-size-supporting: var(--font-size-md);
  --font-size-heading-1: clamp(2.25rem, 5vw, 3.75rem);
  --font-size-heading-2: clamp(1.5rem, 4vw, 2.25rem);
  --font-size-heading-3: var(--font-size-heading-sm);
  --line-height-body: 1.7;
  --line-height-heading: 1.08;
  --font-weight-label: 750;
  --font-weight-action: 800;
  /* Core text and actions */
  --color-ink: #082f49;
  --color-navy: #071e67;
  --color-navy-mid: #123e67;
  --color-text: #365b6d;
  --color-text-muted: #526b88;
  --color-text-subtle: #71828a;
  --color-text-disabled: #8c9ba3;
  --color-link: #075985;
  --color-link-hover: #0e7490;
  --color-brand-teal: #0e8c98;
  --color-brand-teal-dark: #006b68;
  --color-action-blue: #005df4;
  --color-accent: #f4b942;
  --color-accent-strong: #d99620;
  --color-accent-ink: #8a4a06;
  --color-accent-surface: color-mix(
    in srgb,
    var(--color-accent) 45%,
    var(--color-surface)
  );

  /* Surfaces and boundaries */
  --color-canvas: #f7fafc;
  --color-surface: #fff;
  --color-panel-muted: #edf3f5;
  --color-border: #dbe7ec;
  --color-border-strong: #cddfe6;
  --color-control-border: #9bb8c3;

  /* Alpha identity */
  --color-alpha-surface: #eff9f9;
  --color-alpha-border: var(--color-border-strong);
  --color-alpha-dot: #2aab85;

  /* Status and feedback */
  --color-status-success: #087f78;
  --color-status-success-strong: #157355;
  --color-status-success-ink: #173f35;
  --color-status-success-surface: #e8f6f4;
  --color-status-success-border: color-mix(
    in srgb,
    var(--color-status-success) 35%,
    var(--color-surface)
  );
  --color-status-error: #d20a12;
  --color-status-danger-ink: #a23c2d;
  --color-disclosure-ink: color-mix(
    in srgb,
    var(--color-status-danger-ink) 48%,
    var(--color-text-subtle)
  );
  --color-status-error-surface: #fdeaea;
  --color-status-error-border: color-mix(
    in srgb,
    var(--color-status-error) 35%,
    var(--color-surface)
  );
  --color-status-info: #0b6fa4;
  --color-status-info-surface: #eaf4fa;
  --color-status-info-border: color-mix(
    in srgb,
    var(--color-status-info) 35%,
    var(--color-surface)
  );
  --color-status-warning-surface: #fff2d6;
  --color-status-warning-surface-soft: #fff8e8;
  --color-status-warning-border: var(--color-accent-surface);

  /* Data visualization */
  --color-data-navy: var(--color-navy-mid);
  --color-data-teal: var(--color-brand-teal);
  --color-data-blue: #2d7ede;
  --color-data-mint: #86d9b8;
  --color-data-light-blue: #a8c9f4;
  --color-data-cyan: #60c9dc;
  --color-data-purple: #8c76cf;
  --color-data-green: #1a936f;

  /* Translucent effects */
  --color-shadow: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --color-shadow-strong: color-mix(in srgb, var(--color-ink) 20%, transparent);
  --color-surface-translucent: color-mix(
    in srgb,
    var(--color-surface) 94%,
    transparent
  );
  --color-surface-translucent-soft: color-mix(
    in srgb,
    var(--color-surface) 78%,
    transparent
  );
  --color-alpha-ring: color-mix(
    in srgb,
    var(--color-alpha-dot) 13%,
    transparent
  );

  /* Spacing and shape */
  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --control-height: 3rem;
  --simulation-starters-max-width: 31.75rem;
  --progress-height-small: 0.525rem;
  --radius-control: 0.7rem;
  --radius-card: 0.9rem;
  --shadow-card: 0 0.75rem 2rem var(--color-shadow);
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --page-top-gap: clamp(0.7rem, 1vw, 1rem);
  color: var(--color-ink);
  font-family: var(--font-family-body);
  background: var(--color-canvas);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      circle at top right,
      rgb(250 190 65 / 12%),
      transparent 35rem
    ),
    var(--color-canvas);
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}