/* ============================================================
   General Cutting Tools — Design Tokens v1.0
   Canonical source: STYLE-GUIDE.md (this directory)
   Steel neutrals + a single Cobalt accent. No color outside
   this file may be used. "Blue is the cut" — use it sparingly.
   ============================================================ */

:root {
  /* --- Palette (§2.1) --- */
  --gct-cobalt:       #3266CC; /* brand accent: logo "General", links, primary buttons */
  --gct-cobalt-deep:  #2A55A8; /* hover/active; blue headings on white */
  --gct-cobalt-light: #7AA0E8; /* dark-theme accent/links ONLY — never on light */
  --gct-coolant:      #EDF2FB; /* blue-tinted surface: callouts, highlighted rows */
  --gct-carbide:      #14181C; /* display type, logo "Cutting", max emphasis; dark ground */
  --gct-ink:          #23282F; /* body text on light */
  --gct-graphite:     #4C525C; /* secondary text, subheads (7.9:1 on white) */
  --gct-steel:        #666666; /* logo "Tools"; metadata; lightest text gray on white (5.7:1) */
  --gct-nickel:       #9AA1AB; /* disabled; decorative on dark. Never body text */
  --gct-fog:          #DBDFE4; /* borders, dividers, input outlines */
  --gct-mill:         #F2F4F6; /* surface tint, table stripes, wells */
  --gct-paper:        #FAFBFC; /* page background, light theme */
  --gct-white:        #FFFFFF; /* cards on paper; text on dark */

  /* --- Semantic aliases (light theme) --- */
  --gct-ground:         var(--gct-paper);
  --gct-surface:        var(--gct-white);
  --gct-surface-tint:   var(--gct-mill);
  --gct-surface-accent: var(--gct-coolant);
  --gct-text:           var(--gct-ink);
  --gct-text-secondary: var(--gct-graphite);
  --gct-text-meta:      var(--gct-steel);
  --gct-border:         var(--gct-fog);
  --gct-accent:         var(--gct-cobalt);
  --gct-accent-hover:   var(--gct-cobalt-deep);
  --gct-emphasis:       var(--gct-carbide);
  --gct-on-accent:      var(--gct-white);
  --gct-on-emphasis:    var(--gct-white);

  /* --- Typography (§3) --- */
  --gct-font-display: "DecoTech", "Helvetica Neue", Arial, sans-serif;      /* display ONLY, uppercase */
  --gct-font-sans:    "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
  --gct-font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --gct-display: 400 3.75rem/1.033 var(--gct-font-display); /* 60/62, uppercase, +0.02em */
  --gct-h1:      700 2.5rem/1.15 var(--gct-font-sans);      /* 40/46, -0.01em */
  --gct-h2:      700 1.75rem/1.214 var(--gct-font-sans);    /* 28/34, -0.01em */
  --gct-h3:      600 1.25rem/1.4 var(--gct-font-sans);      /* 20/28 */
  --gct-body:    400 1rem/1.625 var(--gct-font-sans);       /* 16/26 */
  --gct-small:   400 0.875rem/1.571 var(--gct-font-sans);   /* 14/22 */
  --gct-caption: 600 0.75rem/1.333 var(--gct-font-sans);    /* 12/16, uppercase, +0.08em */
  --gct-data:    400 0.8125rem/1.538 var(--gct-font-mono);  /* 13/20, tabular */

  /* --- Spacing, 8-point (§4.1) --- */
  --gct-space-1: 4px;
  --gct-space-2: 8px;
  --gct-space-3: 16px;
  --gct-space-4: 24px;
  --gct-space-5: 32px;
  --gct-space-6: 48px;
  --gct-space-7: 64px;
  --gct-space-8: 96px;
  --gct-space-9: 128px;

  /* --- Layout (§4.2) --- */
  --gct-content-max: 1120px;
  --gct-gutter: 24px;

  /* --- Shape (§4.3) --- */
  --gct-radius: 0;                                    /* square corners = milled edge */
  --gct-rule: 1px solid var(--gct-border);
  --gct-kerf: 2px solid var(--gct-accent);            /* signature: the kerf rule */
  --gct-shadow-overlay: 0 2px 16px rgba(20, 24, 28, 0.12); /* modals/dropdowns only */
}

/* --- Dark theme: Carbide ground, Cobalt Light accent (§2.3) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --gct-ground:         var(--gct-carbide);
    --gct-surface:        #1E232B;
    --gct-surface-tint:   #22272F;
    --gct-surface-accent: #1B2740;
    --gct-text:           var(--gct-fog);
    --gct-text-secondary: #B4BAC3;
    --gct-text-meta:      var(--gct-nickel);
    --gct-border:         #2C333C;
    --gct-accent:         var(--gct-cobalt-light);
    --gct-accent-hover:   #9DBAEF;
    --gct-emphasis:       var(--gct-white);
    --gct-on-accent:      var(--gct-carbide);
    --gct-on-emphasis:    var(--gct-carbide);
  }
}

:root[data-theme="dark"] {
  --gct-ground:         var(--gct-carbide);
  --gct-surface:        #1E232B;
  --gct-surface-tint:   #22272F;
  --gct-surface-accent: #1B2740;
  --gct-text:           var(--gct-fog);
  --gct-text-secondary: #B4BAC3;
  --gct-text-meta:      var(--gct-nickel);
  --gct-border:         #2C333C;
  --gct-accent:         var(--gct-cobalt-light);
  --gct-accent-hover:   #9DBAEF;
  --gct-emphasis:       var(--gct-white);
  --gct-on-accent:      var(--gct-carbide);
  --gct-on-emphasis:    var(--gct-carbide);
}

:root[data-theme="light"] {
  --gct-ground:         var(--gct-paper);
  --gct-surface:        var(--gct-white);
  --gct-surface-tint:   var(--gct-mill);
  --gct-surface-accent: var(--gct-coolant);
  --gct-text:           var(--gct-ink);
  --gct-text-secondary: var(--gct-graphite);
  --gct-text-meta:      var(--gct-steel);
  --gct-border:         var(--gct-fog);
  --gct-accent:         var(--gct-cobalt);
  --gct-accent-hover:   var(--gct-cobalt-deep);
  --gct-emphasis:       var(--gct-carbide);
  --gct-on-accent:      var(--gct-white);
  --gct-on-emphasis:    var(--gct-white);
}