/* ==========================================================================
   Crestpin Design System — tokens + base components
   Version 1.0 · October 2026
   Copied from ../design-system/tokens.css (fonts are loaded in index.html)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Primitive tokens: raw values. Don't use these directly in components.
   -------------------------------------------------------------------------- */
:root {
  /* Night: brand blue-black */
  --cp-night-50:  #F0F2F5;
  --cp-night-100: #DDE1E8;
  --cp-night-200: #B7BFCC;
  --cp-night-300: #8A95A9;
  --cp-night-400: #5F6D86;
  --cp-night-500: #3E4D68;
  --cp-night-600: #2B3952;
  --cp-night-700: #1E2A3F;
  --cp-night-800: #141D2E;
  --cp-night-900: #0B1220; /* Crest Night */
  --cp-night-950: #060A12;

  /* Signal: accent orange */
  --cp-signal-50:  #FFF3EC;
  --cp-signal-100: #FFE3D4;
  --cp-signal-200: #FFC2A3;
  --cp-signal-300: #FF9A66;
  --cp-signal-400: #FF7433;
  --cp-signal-500: #FF4F00; /* Signal Orange */
  --cp-signal-600: #D94200;
  --cp-signal-700: #B33600; /* Signal Deep */
  --cp-signal-800: #8A2A00;
  --cp-signal-900: #5C1C00;

  /* Steel: cool neutrals */
  --cp-steel-50:  #F5F6F7;
  --cp-steel-100: #E9EBEE;
  --cp-steel-200: #D3D7DC;
  --cp-steel-300: #B4BAC2;
  --cp-steel-400: #8B929C; /* Titanium */
  --cp-steel-500: #6E757F;
  --cp-steel-600: #5B616B; /* Graphite */
  --cp-steel-700: #444A53;
  --cp-steel-800: #2E333A;
  --cp-steel-900: #1A1E24;

  /* Paper: warm backgrounds */
  --cp-paper-0:   #FFFFFF;
  --cp-paper-50:  #F9F8F5;
  --cp-paper-100: #F3F1EC; /* Drafting Paper */
  --cp-paper-200: #E8E5DE;
  --cp-paper-300: #DAD6CD;

  /* Status */
  --cp-success-light: #1A7A50;  --cp-success-dark: #3DD68C;
  --cp-warning-light: #855900;  --cp-warning-dark: #F5B83D;
  --cp-danger-light:  #B42318;  --cp-danger-dark:  #FF6B6B;
  --cp-info-light:    #2563C9;  --cp-info-dark:    #6EA8FF;

  /* Typography */
  --cp-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --cp-text-xs:   0.75rem;  /* 12 */
  --cp-text-sm:   0.875rem; /* 14 */
  --cp-text-base: 1rem;     /* 16 */
  --cp-text-lg:   1.125rem; /* 18 */
  --cp-text-xl:   1.25rem;  /* 20 */
  --cp-text-2xl:  1.5rem;   /* 24 */
  --cp-text-3xl:  2rem;     /* 32 */
  --cp-text-4xl:  2.5rem;   /* 40 */
  --cp-text-5xl:  3.5rem;   /* 56 */
  --cp-text-6xl:  4.5rem;   /* 72 */
  --cp-text-7xl:  6rem;     /* 96 */

  --cp-leading-tight: 1.05;
  --cp-leading-snug: 1.25;
  --cp-leading-normal: 1.6;

  --cp-tracking-display: -0.02em;
  --cp-tracking-label: 0.12em;

  /* Spacing: 4px base */
  --cp-space-0: 0;
  --cp-space-1: 0.25rem;  /* 4 */
  --cp-space-2: 0.5rem;   /* 8 */
  --cp-space-3: 0.75rem;  /* 12 */
  --cp-space-4: 1rem;     /* 16 */
  --cp-space-6: 1.5rem;   /* 24 */
  --cp-space-8: 2rem;     /* 32 */
  --cp-space-12: 3rem;    /* 48 */
  --cp-space-16: 4rem;    /* 64 */
  --cp-space-24: 6rem;    /* 96 */
  --cp-space-32: 8rem;    /* 128 */

  /* Radius: precise, near-square */
  --cp-radius-none: 0;
  --cp-radius-sm: 2px;
  --cp-radius-md: 4px;
  --cp-radius-lg: 8px;
  --cp-radius-full: 999px;

  /* Borders */
  --cp-border-width: 1px;
  --cp-border-width-strong: 2px;

  /* Elevation: restrained */
  --cp-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --cp-shadow-md: 0 4px 12px rgba(11, 18, 32, 0.08);
  --cp-shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.12);

  /* Motion */
  --cp-ease: cubic-bezier(0.2, 0, 0, 1);
  --cp-duration-fast: 120ms;
  --cp-duration-base: 200ms;
  --cp-duration-slow: 320ms;

  /* Layout */
  --cp-container: 1200px;
  --cp-gutter: 1.5rem;
  --cp-page-margin: 1rem;
}

/* --------------------------------------------------------------------------
   2. Semantic tokens: use these in components. Light theme is the default.
   -------------------------------------------------------------------------- */
:root {
  --cp-bg: var(--cp-paper-100);
  --cp-bg-inverse: var(--cp-night-900);
  --cp-surface: var(--cp-paper-0);
  --cp-surface-sunken: var(--cp-paper-200);

  --cp-text: var(--cp-night-900);
  --cp-text-muted: var(--cp-steel-600);
  --cp-text-inverse: var(--cp-paper-100);

  --cp-border: var(--cp-paper-300);
  --cp-border-strong: var(--cp-steel-400);

  --cp-accent: var(--cp-signal-500);          /* fills, markers, large display */
  --cp-accent-hover: var(--cp-signal-400);
  --cp-accent-text: var(--cp-signal-700);     /* orange text on light */
  --cp-on-accent: var(--cp-night-900);        /* text on orange fills */
  --cp-accent-subtle: var(--cp-signal-50);

  --cp-focus-ring: var(--cp-signal-500);

  --cp-success: var(--cp-success-light);
  --cp-warning: var(--cp-warning-light);
  --cp-danger:  var(--cp-danger-light);
  --cp-info:    var(--cp-info-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-bg: var(--cp-night-900);
    --cp-bg-inverse: var(--cp-paper-100);
    --cp-surface: var(--cp-night-800);
    --cp-surface-sunken: var(--cp-night-950);
    --cp-text: var(--cp-paper-100);
    --cp-text-muted: var(--cp-steel-400);
    --cp-text-inverse: var(--cp-night-900);
    --cp-border: var(--cp-night-700);
    --cp-border-strong: var(--cp-night-500);
    --cp-accent: var(--cp-signal-500);
    --cp-accent-hover: var(--cp-signal-400);
    --cp-accent-text: var(--cp-signal-400);
    --cp-on-accent: var(--cp-night-900);
    --cp-accent-subtle: rgba(255, 79, 0, 0.12);
    --cp-success: var(--cp-success-dark);
    --cp-warning: var(--cp-warning-dark);
    --cp-danger:  var(--cp-danger-dark);
    --cp-info:    var(--cp-info-dark);
  }
}

:root[data-theme="dark"] {
  --cp-bg: var(--cp-night-900);
  --cp-bg-inverse: var(--cp-paper-100);
  --cp-surface: var(--cp-night-800);
  --cp-surface-sunken: var(--cp-night-950);
  --cp-text: var(--cp-paper-100);
  --cp-text-muted: var(--cp-steel-400);
  --cp-text-inverse: var(--cp-night-900);
  --cp-border: var(--cp-night-700);
  --cp-border-strong: var(--cp-night-500);
  --cp-accent: var(--cp-signal-500);
  --cp-accent-hover: var(--cp-signal-400);
  --cp-accent-text: var(--cp-signal-400);
  --cp-on-accent: var(--cp-night-900);
  --cp-accent-subtle: rgba(255, 79, 0, 0.12);
  --cp-success: var(--cp-success-dark);
  --cp-warning: var(--cp-warning-dark);
  --cp-danger:  var(--cp-danger-dark);
  --cp-info:    var(--cp-info-dark);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-base);
  line-height: var(--cp-leading-normal);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--cp-focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.cp-display {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(var(--cp-text-5xl), 8vw, var(--cp-text-7xl));
  line-height: var(--cp-leading-tight);
  letter-spacing: var(--cp-tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.cp-h1, .cp-h2, .cp-h3 {
  font-family: var(--cp-font-display);
  font-weight: 700;
  line-height: var(--cp-leading-snug);
  letter-spacing: var(--cp-tracking-display);
  margin: 0;
}
.cp-h1 { font-size: clamp(var(--cp-text-4xl), 5vw, var(--cp-text-5xl)); }
.cp-h2 { font-size: var(--cp-text-3xl); }
.cp-h3 { font-size: var(--cp-text-xl); }
.cp-lead { font-size: var(--cp-text-lg); color: var(--cp-text-muted); }
.cp-small { font-size: var(--cp-text-sm); color: var(--cp-text-muted); }
.cp-label {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  font-weight: 500;
  letter-spacing: var(--cp-tracking-label);
  text-transform: uppercase;
  color: var(--cp-text-muted);
}
.cp-accent-word { color: var(--cp-accent); }          /* large display only */
.cp-code {
  font-family: var(--cp-font-mono);
  font-size: 0.9em;
  background: var(--cp-surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--cp-radius-sm);
}

/* Section index marker, e.g. "01 / SYSTEMS" */
.cp-index {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  letter-spacing: var(--cp-tracking-label);
  text-transform: uppercase;
  color: var(--cp-text-muted);
}
.cp-index::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--cp-accent);
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Link */
.cp-link {
  color: var(--cp-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cp-link:hover { text-decoration-thickness: 2px; }

/* Button */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-2);
  min-height: 44px;
  padding: 0 var(--cp-space-6);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: var(--cp-border-width) solid transparent;
  border-radius: var(--cp-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--cp-duration-fast) var(--cp-ease),
              border-color var(--cp-duration-fast) var(--cp-ease),
              color var(--cp-duration-fast) var(--cp-ease);
}
.cp-btn--primary { background: var(--cp-accent); color: var(--cp-on-accent); }
.cp-btn--primary:hover { background: var(--cp-accent-hover); }
.cp-btn--secondary { background: var(--cp-text); color: var(--cp-bg); }
.cp-btn--secondary:hover { opacity: 0.88; }
.cp-btn--ghost { background: transparent; color: var(--cp-text); border-color: var(--cp-border-strong); }
.cp-btn--ghost:hover { border-color: var(--cp-text); }
.cp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Input */
.cp-field { display: grid; gap: var(--cp-space-2); }
.cp-input {
  min-height: 44px;
  padding: 0 var(--cp-space-4);
  font: inherit;
  color: var(--cp-text);
  background: var(--cp-surface);
  border: var(--cp-border-width) solid var(--cp-border-strong);
  border-radius: var(--cp-radius-md);
}
.cp-input::placeholder { color: var(--cp-text-muted); }
.cp-input:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-subtle); }

/* Card */
.cp-card {
  background: var(--cp-surface);
  border: var(--cp-border-width) solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-6);
}
.cp-card--inverse { background: var(--cp-bg-inverse); color: var(--cp-text-inverse); border-color: transparent; }

/* Tag / badge */
.cp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-1);
  padding: 2px var(--cp-space-2);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  letter-spacing: 0.04em;
  border: var(--cp-border-width) solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-text-muted);
}
.cp-tag--accent { border-color: var(--cp-accent); color: var(--cp-accent-text); background: var(--cp-accent-subtle); }

/* Status dot */
.cp-dot { width: 8px; height: 8px; border-radius: var(--cp-radius-full); display: inline-block; background: var(--cp-accent); }
.cp-dot--success { background: var(--cp-success); }
.cp-dot--warning { background: var(--cp-warning); }
.cp-dot--danger  { background: var(--cp-danger); }

/* Alert */
.cp-alert {
  display: flex;
  gap: var(--cp-space-3);
  padding: var(--cp-space-4);
  border-left: 3px solid var(--cp-info);
  background: var(--cp-surface);
  border-radius: var(--cp-radius-sm);
}
.cp-alert--success { border-left-color: var(--cp-success); }
.cp-alert--warning { border-left-color: var(--cp-warning); }
.cp-alert--danger  { border-left-color: var(--cp-danger); }

/* Divider */
.cp-rule { border: 0; border-top: var(--cp-border-width) solid var(--cp-border); margin: var(--cp-space-8) 0; }

/* Layout */
.cp-container {
  width: 100%;
  max-width: var(--cp-container);
  margin: 0 auto;
  padding: 0 var(--cp-page-margin);
}
@media (min-width: 768px) { :root { --cp-page-margin: 2rem; } }
.cp-section { padding: var(--cp-space-24) 0; }
.cp-section--inverse { background: var(--cp-bg-inverse); color: var(--cp-text-inverse); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}