/* =============================================================
   Second Island / Puzzleteq Oy — Design Tokens
   colors_and_type.css

   Drop this into any HTML file:
     <link rel="stylesheet" href="colors_and_type.css">

   Naming follows the brand material vocabulary (paper, ink,
   forest, stone, ember…). Semantic aliases (fg-1, bg-1, h1,
   body, etc.) sit on top so components don't reference raw
   colours directly.
   ============================================================= */

/* --- Fonts (Google Fonts CDN — substitutable) ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     COLOUR — raw palette
     The brand's material vocabulary. Never used directly in
     components — go through the semantic aliases below.
     ========================================================= */
  --paper:       #F6F1E6;   /* canonical warm off-white surface */
  --paper-deep:  #EFE7D2;   /* depth on paper */
  --cream:       #EAE2CE;   /* secondary surface, cards on paper */
  --bone:        #FBF8F1;   /* lightest surface, for nested cards */

  --ink:         #1A1714;   /* near-black text, brown undertone */
  --ink-2:       #3A332C;   /* secondary text */
  --ink-3:       #6B6055;   /* tertiary text, captions */
  --ink-4:       #9C9082;   /* quaternary, placeholders */

  --forest:      #1F3A2E;   /* primary brand colour */
  --forest-deep: #15281F;   /* hover / pressed forest */
  --moss:        #4A5D3E;   /* secondary forest */
  --lichen:      #8B9075;   /* supporting muted green-grey */

  --lake:        #3F525B;   /* cool counterweight, Puzzleteq side */
  --lake-deep:   #2B3A41;
  --slate:       #5A6770;

  --stone:       #BFB7A6;   /* borders, dividers, tertiary surfaces */
  --stone-soft:  #D9D2C2;
  --stone-deep:  #8F8676;

  --ember:       #B5532B;   /* single warm accent — links, focus */
  --ember-deep:  #8E3F1D;   /* ember hover/pressed */
  --ember-soft:  #E6C8B5;   /* ember tint background */

  --gold:        #9B7B3A;   /* crest only, never UI fills */

  --error:       #94322A;   /* deep rust-red for errors */
  --warn:        #A7782C;   /* burnt amber for warnings */
  --ok:          #4A5D3E;   /* moss for success */

  /* =========================================================
     COLOUR — semantic aliases
     Components reference these. Light theme by default.
     ========================================================= */
  --bg:          var(--paper);
  --bg-1:        var(--paper);        /* page surface */
  --bg-2:        var(--cream);        /* card surface */
  --bg-3:        var(--bone);         /* nested card / table row */
  --bg-deep:     var(--paper-deep);   /* depth */
  --bg-inverse:  var(--forest);       /* dark band, hero, footer */

  --fg-1:        var(--ink);          /* primary text */
  --fg-2:        var(--ink-2);        /* secondary text */
  --fg-3:        var(--ink-3);        /* tertiary, captions */
  --fg-4:        var(--ink-4);        /* placeholder */
  --fg-on-dark:  var(--paper);        /* text on forest/inverse */
  --fg-on-dark-2:#C8C1AF;             /* secondary on dark */

  --border:      var(--stone);        /* default 1 px border */
  --border-soft: var(--stone-soft);   /* hairline */
  --border-strong: var(--ink-3);

  --link:        var(--ember);
  --link-hover:  var(--ember-deep);
  --accent:      var(--ember);
  --brand:       var(--forest);
  --brand-2:     var(--lake);

  --focus-ring:  var(--ember);

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  --font-serif:   'Newsreader', 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --font-sans:    'IBM Plex Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);

  /* =========================================================
     TYPOGRAPHY — scale (px values; Newsreader uses opsz)
     Headings prefer Newsreader, UI prefers IBM Plex.
     ========================================================= */
  --fs-display-2xl: 88px;
  --fs-display-xl:  72px;
  --fs-display-lg:  56px;
  --fs-display-md:  44px;
  --fs-display-sm:  36px;

  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-h6: 14px;

  --fs-lead:    22px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  --lh-tight:   1.08;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-allcaps: 0.12em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* =========================================================
     SPACING — 4 px base
     ========================================================= */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;
  --s-11:192px;

  /* =========================================================
     RADII
     ========================================================= */
  --r-0: 0px;
  --r-1: 2px;     /* buttons */
  --r-2: 4px;     /* cards */
  --r-3: 8px;     /* large surfaces */
  --r-pill: 999px;/* tags only */

  /* =========================================================
     ELEVATION
     ========================================================= */
  --shadow-hairline: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-resting:  0 2px 6px rgba(26, 23, 20, 0.06), 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-overlay:  0 8px 24px rgba(26, 23, 20, 0.10), 0 2px 6px rgba(26, 23, 20, 0.06);
  --shadow-pressed:  inset 0 1px 2px rgba(26, 23, 20, 0.10);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --col-text:   720px;
  --col-figure: 1200px;
  --col-page:   1440px;
  --nav-h:      64px;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-linear: linear;
  --dur-fast:    160ms;
  --dur:         220ms;
  --dur-slow:    320ms;
}

/* =============================================================
   Base reset (light-touch — opt in by importing this file)
   ============================================================= */
html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-feature-settings: "ss01", "kern";
}

/* =============================================================
   Semantic typographic classes
   Use these directly OR let h1..h6 inherit from .ds-prose.
   ============================================================= */
.ds-display-2xl,
.ds-display-xl,
.ds-display-lg,
.ds-display-md,
.ds-display-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 72;
  margin: 0;
}
.ds-display-2xl { font-size: var(--fs-display-2xl); }
.ds-display-xl  { font-size: var(--fs-display-xl);  }
.ds-display-lg  { font-size: var(--fs-display-lg);  }
.ds-display-md  { font-size: var(--fs-display-md);  font-variation-settings: "opsz" 60; }
.ds-display-sm  { font-size: var(--fs-display-sm);  font-variation-settings: "opsz" 48; }

.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}
.ds-h1 { font-size: var(--fs-h1); font-variation-settings: "opsz" 36; }
.ds-h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 30; }
.ds-h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 24; }
.ds-h4 { font-size: var(--fs-h4); font-variation-settings: "opsz" 20; }

.ds-h5, .ds-h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
  margin: 0;
}
.ds-h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
.ds-h6 {
  font-size: var(--fs-h6);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

.ds-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-variation-settings: "opsz" 22;
  font-weight: var(--fw-regular);
}

.ds-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.ds-body-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  font-variation-settings: "opsz" 16;
  color: var(--fg-1);
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

.ds-italic { font-style: italic; }

/* =============================================================
   .ds-prose — apply to long-form copy containers (founder
   letters, blog posts, investor updates).
   ============================================================= */
.ds-prose {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: var(--lh-loose);
  color: var(--fg-1);
  font-variation-settings: "opsz" 18;
  max-width: var(--col-text);
}
.ds-prose h1 { font-size: var(--fs-display-sm); font-variation-settings: "opsz" 48; line-height: var(--lh-tight); margin: 0 0 var(--s-5); letter-spacing: var(--tracking-tight); }
.ds-prose h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 30; line-height: var(--lh-snug); margin: var(--s-8) 0 var(--s-3); }
.ds-prose h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 24; line-height: var(--lh-snug); margin: var(--s-6) 0 var(--s-2); }
.ds-prose p  { margin: 0 0 var(--s-4); }
.ds-prose a  { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ds-prose a:hover { color: var(--link-hover); }
.ds-prose blockquote {
  margin: var(--s-6) 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--ember);
  font-style: italic;
  color: var(--fg-2);
}
.ds-prose code, .ds-prose kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--cream); padding: 1px 5px; border-radius: var(--r-1); }
.ds-prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

/* =============================================================
   Focus
   ============================================================= */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-1);
}