@font-face {
  font-family: 'Norwester';
  src: url('./fonts/Norwester.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Intro Rust';
  src: url('./fonts/IntroRust-Base.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('./fonts/JetBrainsMono-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir-Heavy.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  
  --spc-blue:      #0094ff;
  --spc-black:     #000000;
  --spc-white:     #ffffff;
  --spc-off-white: #f0f1f3;

  
  --blue-50:  #e6f5ff;
  --blue-100: #cceaff;
  --blue-200: #99d5ff;
  --blue-300: #66bfff;
  --blue-400: #33aaff;   
  --blue-500: #0094ff;   
  --blue-600: #0077db;   
  --blue-700: #005fb0;   
  --blue-800: #004788;
  --blue-900: #00305c;
  --blue-950: #001b33;

  
  --n-0:   #ffffff;
  --n-50:  #f7f8fa;
  --n-100: #f0f1f3;
  --n-150: #e7e9ec;
  --n-200: #d8dbe0;
  --n-300: #bcc0c8;
  --n-400: #9094a0;
  --n-500: #62656b;
  --n-600: #474a50;
  --n-700: #2d2f35;
  --n-800: #1a1c20;
  --n-850: #121316;
  --n-900: #08090b;
  --n-950: #000000;

  
  --green-600: #0f8a5f; --green-500: #12a06e; --green-100: #d8f3e7;
  --amber-600: #c47d10; --amber-500: #e8a12b; --amber-100: #fdefce;
  --red-600:   #cc2f37; --red-500:   #e5484d; --red-100:   #fbe0e1;

  
  --font-title:    'Norwester', 'Oswald', sans-serif;
  --font-heading:  'Intro Rust', 'Archivo', sans-serif;
  --font-subtitle: 'Cormorant Garamond', Georgia, serif;
  --font-body:     'Avenir', 'Mulish', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  
  --fs-title:    clamp(40px, 6vw, 76px);
  --fs-heading:  clamp(26px, 3.4vw, 40px);
  --fs-subtitle: 22px;
  --fs-body:     17px;
  --fs-mono:     13px;

  --lh-title: 1.02;  --lh-heading: 1.15;  --lh-subtitle: 1.35;  --lh-body: 1.6;
  --ls-title: 0.01em; --ls-mono: 0.04em;

  
  --gutter:           clamp(1.25rem, 4vw, 4rem);
  --section-y:        clamp(4rem, 8vw, 8rem);
  --container-max:    1240px;
  --container-narrow: 760px;   

  
  --radius-xs: 3px;  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --bw-base: 1.5px; --bw-strong: 2px;

  
  --shadow-sm: 0 1px 3px rgba(0,30,60,0.09), 0 1px 2px rgba(0,30,60,0.06);
  --shadow-md: 0 6px 16px -4px rgba(0,30,60,0.14), 0 2px 6px -2px rgba(0,30,60,0.09);
  --shadow-lg: 0 18px 40px -12px rgba(0,25,55,0.22), 0 6px 14px -8px rgba(0,25,55,0.14);
  --shadow-xl: 0 32px 64px -16px rgba(0,15,35,0.36);
  --shadow-focus: 0 0 0 3px rgba(0,148,255,0.35);   

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

:root,
[data-theme='light'] {
  --bg-page:   var(--n-0);
  --bg-subtle: var(--n-50);

  --surface-1: #ffffff;
  --surface-2: var(--n-50);
  --surface-3: var(--n-100);
  --surface-inverse: var(--n-950);

  --border:        var(--n-200);
  --border-strong: var(--n-300);

  --text-strong: var(--n-900);
  --text-body:   var(--n-700);
  --text-muted:  var(--n-500);
  --text-inverse:var(--n-0);
  --text-on-accent: #ffffff;

  --primary:       var(--spc-black);
  --primary-hover: var(--n-800);
  --primary-press: var(--n-950);
  --text-on-primary: var(--spc-white);

  --accent:      var(--blue-500);
  --accent-hover:var(--blue-600);
  --accent-press:var(--blue-700);
  --accent-soft: var(--blue-50);

  --link:       var(--blue-600);
  --focus-ring: var(--blue-500);

  --success: var(--green-600); --success-soft: var(--green-100);
  --warning: var(--amber-600); --warning-soft: var(--amber-100);
  --danger:  var(--red-600);   --danger-soft:  var(--red-100);

  --elevation-card:       var(--shadow-sm);
  --elevation-card-hover: var(--shadow-md);
}

[data-theme='dark'] {
  --bg-page:   var(--n-950);   
  --bg-subtle: var(--n-900);

  --surface-1: var(--n-850);
  --surface-2: var(--n-800);
  --surface-3: var(--n-700);
  --surface-inverse: var(--n-0);

  --border:        rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.24);

  --text-strong: var(--spc-white);
  --text-body:   var(--spc-off-white);
  --text-muted:  var(--n-400);
  --text-inverse:var(--n-950);
  --text-on-accent: #ffffff;

  
  --primary:       var(--spc-white);
  --primary-hover: var(--n-100);
  --primary-press: var(--n-200);
  --text-on-primary: var(--spc-black);

  
  --accent:      var(--blue-500);
  --accent-hover:var(--blue-400);
  --accent-press:var(--blue-600);
  --accent-soft: var(--blue-950);

  --link:       var(--blue-400);
  --focus-ring: var(--blue-500);

  --success: var(--green-500); --success-soft: #0a2e21;
  --warning: var(--amber-500); --warning-soft: #33260a;
  --danger:  var(--red-500);   --danger-soft:  #331315;

  
  --elevation-card:       none;
  --elevation-card-hover: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-page: var(--n-950);        --bg-subtle: var(--n-900);
    --surface-1: var(--n-850);      --surface-2: var(--n-800);
    --surface-3: var(--n-700);      --surface-inverse: var(--n-0);
    --border: rgba(255,255,255,0.14);
    --border-strong: rgba(255,255,255,0.24);
    --text-strong: var(--spc-white); --text-body: var(--spc-off-white);
    --text-muted: var(--n-400);     --text-inverse: var(--n-950);
    --primary: var(--spc-white);    --primary-hover: var(--n-100);
    --primary-press: var(--n-200);  --text-on-primary: var(--spc-black);
    --accent-hover: var(--blue-400); --accent-soft: var(--blue-950);
    --link: var(--blue-400);
    --elevation-card: none;         --elevation-card-hover: none;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.spc-title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--text-strong);
}

.spc-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  color: var(--text-strong);
}

.spc-subtitle {
  font-family: var(--font-subtitle);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--text-muted);
}

.spc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

.spc-mono--accent { color: var(--accent); }

.spc-title em,
.spc-heading em { color: var(--accent); font-style: normal; }

p { max-width: var(--container-narrow); }

.spc-pillars {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.spc-pillars > * + *::before { content: " · "; opacity: 0.6; }

.spc-btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.spc-btn-primary:hover { background: var(--primary-hover); }

.spc-btn-accent {
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.spc-btn-accent:hover { background: var(--accent-hover); }
.spc-btn-accent:active { background: var(--accent-press); }

.spc-card {
  background: var(--surface-1);
  color: var(--text-body);
  border: var(--bw-base) solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--elevation-card);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.spc-card:hover {
  box-shadow: var(--elevation-card-hover);
  border-color: var(--border-strong);
}

.spc-input {
  background: var(--surface-1);
  color: var(--text-strong);
  border: var(--bw-base) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  width: 100%;
}
.spc-input:focus-visible { border-color: var(--accent); }

.spc-logo-hex { display: inline-block; }
.spc-logo-hex img { display: block; height: auto; }

.spc-logo-plate {
  background: var(--spc-white);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: inline-flex;
}

.spc-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.spc-wrap--narrow { max-width: var(--container-narrow); }
.spc-section { padding-block: var(--section-y); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spc-btn-primary, .spc-btn-accent, .spc-card { transition: none; }
}