/*
 * Internet 1 CZ design tokens, from the Claude Design handoff
 * (docs/design/handoff/project/tokens/: fonts, colors, typography, spacing, base).
 * Changes from the handoff:
 *   - fonts are local @font-face rules on /assets/fonts/, no Google Fonts import;
 *   - the dark block is mirrored under prefers-color-scheme, so dark follows the OS
 *     unless html[data-theme] is set by the toggle;
 *   - --radius-sm and --radius-md are 2px: the handoff readme says square corners
 *     everywhere except 2px on controls, the token file still carried 6 and 8.
 */

/* Fonts: self-hosted woff2, OFL licences alongside. */
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand blue scale, hue 275. blue-brand-900 ≈ #191a5e */
  --blue-brand-50:  oklch(0.972 0.014 275);
  --blue-brand-100: oklch(0.941 0.030 275);
  --blue-brand-200: oklch(0.882 0.058 275);
  --blue-brand-300: oklch(0.800 0.092 275);
  --blue-brand-400: oklch(0.690 0.135 275);
  --blue-brand-500: oklch(0.580 0.165 275);
  --blue-brand-600: oklch(0.490 0.170 275);
  --blue-brand-700: oklch(0.410 0.155 275);
  --blue-brand-800: oklch(0.335 0.135 275);
  --blue-brand-900: oklch(0.270 0.118 275);

  /* Cool neutrals */
  --gray-0:   oklch(1 0 0);
  --gray-50:  oklch(0.982 0.003 250);
  --gray-100: oklch(0.965 0.004 250);
  --gray-200: oklch(0.930 0.006 250);
  --gray-300: oklch(0.870 0.008 250);
  --gray-400: oklch(0.720 0.010 250);
  --gray-500: oklch(0.600 0.012 250);
  --gray-600: oklch(0.500 0.014 250);
  --gray-700: oklch(0.420 0.014 250);
  --gray-800: oklch(0.320 0.014 250);
  --gray-900: oklch(0.220 0.014 250);
  --gray-950: oklch(0.165 0.013 250);

  /* Semantic hues — form states only */
  --red-500:    oklch(0.545 0.170 25);
  --red-100:    oklch(0.941 0.040 25);
  --red-700:    oklch(0.460 0.150 25);
  --amber-500:  oklch(0.700 0.140 75);
  --amber-100:  oklch(0.950 0.050 85);
  --amber-800:  oklch(0.480 0.100 75);
  --green-500:  oklch(0.620 0.150 152);
  --green-100:  oklch(0.941 0.048 152);
  --green-700:  oklch(0.478 0.118 152);
  --blue-500:   oklch(0.545 0.138 250);
  --blue-100:   oklch(0.941 0.035 250);
  --blue-700:   oklch(0.460 0.120 250);

  /* Semantic aliases (light) */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--gray-0);
  --surface-sunken:  var(--gray-100);
  --surface-hover:   var(--gray-100);
  --surface-selected: var(--blue-brand-50);
  --surface-band:    var(--gray-950);   /* the one near-black band, always rendered with data-theme="dark" */

  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-500);
  --text-on-accent:  #ffffff;
  --text-link:       var(--blue-brand-600);
  --text-link-hover: var(--blue-brand-800);

  --accent:          var(--blue-brand-600);
  --accent-hover:    var(--blue-brand-700);
  --accent-active:   var(--blue-brand-800);
  --accent-subtle:   var(--blue-brand-50);
  --accent-subtle-border: var(--blue-brand-200);
  --accent-text:     var(--blue-brand-700);

  --border-default:  var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-input:    var(--gray-400);
  --focus-ring:      oklch(0.580 0.165 275 / 0.40);

  --success-bg:   var(--green-100);
  --success-text: var(--green-700);
  --warning-bg:   var(--amber-100);
  --warning-text: var(--amber-800);
  --danger-bg:    var(--red-100);
  --danger-text:  var(--red-700);
  --danger:       var(--red-500);
  --info-bg:      var(--blue-100);
  --info-text:    var(--blue-700);

  color-scheme: light;
}

/* Dark theme. html[data-theme="dark"] for the whole page, or data-theme="dark" on any
   element to scope a dark band (the home page header and hero). */
[data-theme="dark"] {
  --surface-page:    var(--gray-950);
  --surface-card:    oklch(0.205 0.014 250);
  --surface-sunken:  oklch(0.185 0.013 250);
  --surface-hover:   oklch(0.245 0.014 250);
  --surface-selected: oklch(0.580 0.165 275 / 0.16);
  --surface-band:    oklch(0.130 0.012 250);

  --text-primary:    oklch(0.930 0.005 250);
  --text-secondary:  oklch(0.760 0.010 250);
  --text-muted:      oklch(0.640 0.012 250);
  --text-on-accent:  oklch(0.180 0.060 275);
  --text-link:       var(--blue-brand-300);
  --text-link-hover: var(--blue-brand-200);

  --accent:          var(--blue-brand-300);
  --accent-hover:    var(--blue-brand-200);
  --accent-active:   var(--blue-brand-400);
  --accent-subtle:   oklch(0.580 0.165 275 / 0.16);
  --accent-subtle-border: oklch(0.580 0.165 275 / 0.40);
  --accent-text:     var(--blue-brand-300);

  --border-default:  oklch(0.300 0.014 250);
  --border-strong:   oklch(0.380 0.014 250);
  --border-input:    oklch(0.450 0.014 250);
  --focus-ring:      oklch(0.690 0.135 275 / 0.45);

  --success-bg:   oklch(0.545 0.138 152 / 0.16);
  --success-text: oklch(0.800 0.126 152);
  --warning-bg:   oklch(0.700 0.140 75 / 0.16);
  --warning-text: oklch(0.820 0.110 85);
  --danger-bg:    oklch(0.545 0.170 25 / 0.16);
  --danger-text:  oklch(0.780 0.100 25);
  --danger:       oklch(0.650 0.170 25);
  --info-bg:      oklch(0.545 0.138 250 / 0.16);
  --info-text:    oklch(0.780 0.080 250);

  color-scheme: dark;
  color: var(--text-primary);
}

/* No explicit choice: follow the OS. Same values as the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:    var(--gray-950);
    --surface-card:    oklch(0.205 0.014 250);
    --surface-sunken:  oklch(0.185 0.013 250);
    --surface-hover:   oklch(0.245 0.014 250);
    --surface-selected: oklch(0.580 0.165 275 / 0.16);
    --surface-band:    oklch(0.130 0.012 250);

    --text-primary:    oklch(0.930 0.005 250);
    --text-secondary:  oklch(0.760 0.010 250);
    --text-muted:      oklch(0.640 0.012 250);
    --text-on-accent:  oklch(0.180 0.060 275);
    --text-link:       var(--blue-brand-300);
    --text-link-hover: var(--blue-brand-200);

    --accent:          var(--blue-brand-300);
    --accent-hover:    var(--blue-brand-200);
    --accent-active:   var(--blue-brand-400);
    --accent-subtle:   oklch(0.580 0.165 275 / 0.16);
    --accent-subtle-border: oklch(0.580 0.165 275 / 0.40);
    --accent-text:     var(--blue-brand-300);

    --border-default:  oklch(0.300 0.014 250);
    --border-strong:   oklch(0.380 0.014 250);
    --border-input:    oklch(0.450 0.014 250);
    --focus-ring:      oklch(0.690 0.135 275 / 0.45);

    --success-bg:   oklch(0.545 0.138 152 / 0.16);
    --success-text: oklch(0.800 0.126 152);
    --warning-bg:   oklch(0.700 0.140 75 / 0.16);
    --warning-text: oklch(0.820 0.110 85);
    --danger-bg:    oklch(0.545 0.170 25 / 0.16);
    --danger-text:  oklch(0.780 0.100 25);
    --danger:       oklch(0.650 0.170 25);
    --info-bg:      oklch(0.545 0.138 250 / 0.16);
    --info-text:    oklch(0.780 0.080 250);

    color-scheme: dark;
    color: var(--text-primary);
  }
}

:root {
  --font-sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Marketing scale (Internet 1 additions; fluid between 390 and 1280) */
  --text-hero-size: clamp(40px, 3.6vw + 26px, 72px); /* @kind other */  --text-hero-lh: 1.0;  --text-hero-weight: 700;  --tracking-hero: -0.035em;
  --text-h2-size: clamp(24px, 0.9vw + 20.5px, 32px); /* @kind other */  --text-h2-lh: 1.2;     --text-h2-weight: 700;    --tracking-h2: -0.015em;
  --text-lead-size: clamp(18px, 0.45vw + 16px, 21px); /* @kind other */ --text-lead-lh: 1.5;
  --text-stat-size: clamp(36px, 2.2vw + 28px, 56px); /* @kind other */ --text-stat-lh: 1.0;  --text-stat-weight: 400;

  /* Product scale (from SiliconRelay, body raised to 16 for a reading site) */
  --text-display-size: 28px;  --text-display-lh: 34px;  --text-display-weight: 700;
  --text-title-size: 20px;    --text-title-lh: 26px;    --text-title-weight: 600;
  --text-heading-size: 16px;  --text-heading-lh: 22px;  --text-heading-weight: 600;
  --text-body-size: 16px;     --text-body-lh: 24px;     --text-body-weight: 400;
  --text-small-size: 14px;    --text-small-lh: 20px;
  --text-caption-size: 12px;  --text-caption-lh: 16px;
  --text-metric-size: 24px;   --text-metric-lh: 30px;   --text-metric-weight: 600;
  --tracking-caps: 0.04em;
  --tracking-wordmark: -0.01em;
}

:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm: 2px;    /* inputs, buttons, tags, toggles */
  --radius-md: 2px;    /* alerts, badge slot */
  --radius-lg: 12px;   /* cards */
  --radius-app: 22.4%; /* iOS app icon corner */
  --radius-full: 999px;

  /* Light mode uses no card shadows; these exist for overlays only. */
  --shadow-xs: 0 1px 2px oklch(0.22 0.014 250 / 0.05);
  --shadow-sm: 0 1px 3px oklch(0.22 0.014 250 / 0.07), 0 1px 2px oklch(0.22 0.014 250 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.22 0.014 250 / 0.08), 0 1px 3px oklch(0.22 0.014 250 / 0.06);

  --hairline: 1px solid var(--border-default);

  --control-h-sm: 32px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  --header-h: 60px;
  --content-max: 1200px;
  --text-max: 680px;
  --gutter: clamp(20px, 3vw, 40px); /* @kind spacing */
  --section-gap: clamp(64px, 6vw + 40px, 112px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
}

/* Minimal base: body reset, link defaults, mono helper. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--blue-brand-100); color: var(--gray-900); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }