/* Simon Conway — design system tokens
   Extracted 2026-06-21 from the portfolio site + CV. See design-system.md.
   Usage: link or inline this file, then add the Google Fonts <link> below for Rosarivo,
   Roboto Condensed and Roboto. Switzer is self-hosted from ./fonts/.

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Condensed:wght@400;600;700;800;900&family=Rosarivo:ital@0;1&display=swap" rel="stylesheet">
*/

@font-face {
  font-family: 'Switzer Variable';
  src: url('fonts/Switzer-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Foundation — navy */
  --navy-950: #0A1722;
  --navy-900: #102433;
  --navy-800: #13222F;
  --navy-700: #193D53;

  /* Accent — mint */
  --mint: #28FFD8;
  --mint-dim: #1FCFAE;

  /* CTA — orange */
  --cta-orange: #FF8A70;
  --cta-deep: #FF7448;

  /* Text on navy */
  --ink: #FFFFFF;
  --ink-soft: rgba(255,255,255,.75);
  --ink-faint: rgba(255,255,255,.55);
  --hairline: rgba(255,255,255,.08);

  /* Provisional categorical palette (GAP — not in the source brand; see design-system.md) */
  --cat-1: #28FFD8; /* mint */
  --cat-2: #FF8A70; /* orange */
  --cat-3: #FFD27A; /* gold */
  --cat-4: #8FB8FF; /* periwinkle */

  /* Type */
  --font-sans: 'Switzer Variable', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: 'Rosarivo', Georgia, serif;
  --font-condensed: 'Roboto Condensed', system-ui, sans-serif;
  --font-roboto: 'Roboto', system-ui, sans-serif;

  /* Layout */
  --content-w: 960px;
  --pad-x: 24px;

  /* Radius (pills + provisional card radius) */
  --radius-pill: 999px;
  --radius: 16px;
  --radius-sm: 10px;

  /* Provisional shadow scale (GAP) */
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
}

/* Base */
.ds-body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ds-container { max-width: var(--content-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Display name lockup */
.ds-display {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--mint);
}

/* Serif voice */
.ds-voice { font-family: var(--font-serif); line-height: 1.3; }
.ds-voice-italic { font-family: var(--font-serif); font-style: italic; color: var(--mint); }
.ds-eyebrow { font-family: var(--font-serif); color: var(--mint); }

/* Buttons */
.ds-btn { display:inline-flex; align-items:center; gap:8px; border-radius: var(--radius-pill); padding:8px 16px; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; transition:.15s ease; }
.ds-btn-primary { background: var(--mint); color: var(--navy-900); border:0; }
.ds-btn-primary:hover { background: var(--ink); }
.ds-btn-secondary { background: transparent; color: var(--mint); border:1px solid color-mix(in srgb, var(--mint) 60%, transparent); }
.ds-btn-secondary:hover { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); }
.ds-cta { background: var(--cta-orange); color: var(--navy-900); border:0; border-radius: var(--radius-pill); padding:8px 20px; font-weight:600; }
.ds-cta:hover { background: var(--cta-deep); }

/* Surface */
.ds-card { background: var(--navy-900); border:1px solid var(--hairline); border-radius: var(--radius); }

/* Focus / accessibility */
.ds-focus:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }