/* CTRL TRIP · Brand foundations · Edition 01
   Logo geometry lives in logos/logo-spec.md and the supplied artwork.
   This stylesheet defines fonts and tokens; it does not impose a page layout. */

@font-face {
  font-family: 'Manrope';
  src: url('./fonts/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Latin-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Latin-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ct-color-ink: #172522;
  --ct-color-paper: #F3F3E9;
  --ct-color-signal: #D5F66B;
  --ct-color-mist: #DFE4DB;
  --ct-color-secondary: #56605B;
  --ct-color-border: #C9D0C6;
  /* Supporting surfaces and illustrations; primary actions remain Signal. */
  --ct-color-sky: #C8DDF2;
  --ct-color-lilac: #DDD4F1;
  --ct-color-apricot: #F2CEB2;
  --ct-color-mint: #CEE8DA;

  --ct-gradient-air: linear-gradient(135deg, #C8DDF2 0%, #F3F3E9 46%, #CEE8DA 100%);
  --ct-gradient-afterglow: linear-gradient(135deg, #F2CEB2 0%, #DDD4F1 100%);
  --ct-gradient-current: linear-gradient(120deg, #DDD4F1 0%, #C8DDF2 48%, #CEE8DA 100%);

  /* Frost is decorative. Back it with an opaque surface; use solid Paper behind reading. */
  --ct-frost-backing: var(--ct-color-paper);
  --ct-frost-shell: rgb(243 243 233 / 0.72);
  --ct-frost-reading-surface: var(--ct-color-paper);
  --ct-frost-fallback: var(--ct-color-paper);
  --ct-frost-filter: blur(18px) saturate(115%);
  --ct-frost-rim: 1px solid rgb(243 243 233 / 0.8);
  --ct-frost-shadow: 0 20px 60px rgb(23 37 34 / 0.1);

  --ct-icon-size: 24px;
  --ct-icon-size-compact: 20px;
  --ct-icon-stroke: 2;
  --ct-matrix-dot: 3px;
  --ct-matrix-pitch: 10px;
  --ct-matrix-columns: 32;
  --ct-matrix-rows: 18;
  --ct-matrix-columns-mobile: 20;
  --ct-matrix-rows-mobile: 12;

  --ct-color-background: var(--ct-color-paper);
  --ct-color-text: var(--ct-color-ink);
  --ct-color-text-secondary: var(--ct-color-secondary);
  --ct-color-action-background: var(--ct-color-signal);
  --ct-color-action-text: var(--ct-color-ink);
  --ct-color-focus: var(--ct-color-ink);
  --ct-color-control-border: var(--ct-color-secondary);
  --ct-color-divider: var(--ct-color-border);

  --ct-logo-top-face: var(--ct-color-signal);
  --ct-logo-top-text: var(--ct-color-ink);
  --ct-logo-bottom-face: var(--ct-color-ink);
  --ct-logo-bottom-text: var(--ct-color-paper);
  /* Use the supplied outlined logo artwork for final placement. */
  --ct-font-logo: 'IBM Plex Mono', 'Courier New', monospace;
  --ct-weight-logo: 500;
  --ct-font-display: 'Manrope', Arial, sans-serif;
  --ct-font-body: 'Manrope', Arial, sans-serif;
  --ct-font-label: 'IBM Plex Mono', 'Courier New', monospace;
  --ct-weight-display: 600;
  --ct-weight-display-emphasis: 700;
  --ct-weight-body: 400;
  --ct-weight-ui: 500;
  --ct-weight-body-emphasis: 600;
  --ct-size-body: 1.125rem;
  --ct-size-label: 0.875rem;
  --ct-leading-body: 1.55;
  --ct-leading-display: 1.05;
  --ct-text-measure: 65ch;

  --ct-space-4: 4px;
  --ct-space-8: 8px;
  --ct-space-12: 12px;
  --ct-space-16: 16px;
  --ct-space-24: 24px;
  --ct-space-32: 32px;
  --ct-space-48: 48px;
  --ct-space-64: 64px;
  --ct-space-96: 96px;

  --ct-radius-control: 10px;
  --ct-radius-card: 20px;
  --ct-target-min: 44px;
  --ct-focus-width: 2px;
  --ct-focus-offset: 3px;

  --ct-motion-press: 160ms;
  --ct-motion-transition: 220ms;
  --ct-motion-explain: 480ms;
  --ct-motion-matrix-run: 3200ms;
  --ct-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Use light text and focus indicators on dark surfaces. */
[data-ct-surface='ink'] {
  --ct-color-background: var(--ct-color-ink);
  --ct-color-text: var(--ct-color-paper);
  --ct-color-text-secondary: var(--ct-color-mist);
  --ct-color-focus: var(--ct-color-signal);
  --ct-color-control-border: var(--ct-color-mist);
}

/* JS animations must also read prefers-reduced-motion and show their final state.
   Token overrides alone do not disable independent GSAP or other JS timelines. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-motion-press: 0ms;
    --ct-motion-transition: 0ms;
    --ct-motion-explain: 0ms;
    --ct-motion-matrix-run: 0ms;
  }
}