/* ============================================================
   Inacupcake Design System — global entry point
   Consumers link THIS one file. It is fully self-contained:
   self-hosted webfonts + all design tokens + base layer, inlined
   in order (fonts → colors → typography → spacing → base).

   NOTE: this file deliberately uses NO @import. The preview/serve
   layer does not propagate its auth token into url()/@import
   requests made from inside a CSS file, so a split @import chain
   silently 401s and no tokens apply. Keeping everything in one
   stylesheet means a single successful fetch delivers the whole
   system — colours included.
   ============================================================ */

/* ============================================================
   1 · WEBFONTS  — self-hosted Courier Prime (the house monospace)
   Brand alias "Inacupcake Mono". Swap the files under /fonts to
   change the face; nothing else needs to move.
   ============================================================ */
@font-face {
  font-family: 'Inacupcake Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/CourierPrime-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Inacupcake Mono';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/CourierPrime-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Inacupcake Mono';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/CourierPrime-Italic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Inacupcake Mono';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/CourierPrime-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

/* Also publish the same faces under the literal name "Courier Prime"
   so that family (referenced in fallback stacks and tooling) resolves
   to the real bundled files rather than only a locally-installed copy. */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/CourierPrime-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/CourierPrime-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/CourierPrime-Italic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/CourierPrime-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

/* ============================================================
   2 · COLOR tokens
   Sampled directly from the original poster artworks: warm cream
   paper, cut-out collage colours (cobalt, orange, coral, lilac),
   and typewriter-grey ink for the Courier poetry.
   ============================================================ */
:root {
  /* ---- Paper / surfaces ---- */
  --cream:        #F8F6E9;   /* the signature warm paper background */
  --cream-deep:   #F0EDD8;   /* slightly deeper cream for edges/wells */
  --lilac-paper:  #E8EAFF;   /* cool alternate paper (decisions series) */
  --paper-white:  #FCFBF4;   /* lightest, near-white panel */

  /* ---- Collage colours (the cut-out palette) ---- */
  --cobalt:       #0A6AD4;   /* dominant electric blue */
  --cobalt-deep:  #0654B0;   /* pressed / shadow blue */
  --orange:       #FF6100;   /* hot poster orange */
  --coral:        #E35D56;   /* terracotta / coral red */
  --lilac:        #BABFFF;   /* periwinkle, the soft hand colour */
  --lilac-deep:   #9AA0F0;   /* saturated lilac for press states */
  --gold:         #C9A24B;   /* ochre contour-line accent */

  /* ---- Ink (typewriter text) ---- */
  --ink:          #2B2B2B;   /* near-black, line drawings + headings */
  --pencil:       #6B6B6B;   /* muted grey, the Courier body poetry */
  --pencil-soft:  #9A9A93;   /* faded captions / metadata */

  /* ---- Semantic aliases ---- */
  --surface:           var(--cream);
  --surface-alt:       var(--lilac-paper);
  --surface-raised:    var(--paper-white);
  --surface-well:      var(--cream-deep);

  --text-strong:       var(--ink);
  --text-body:         var(--pencil);
  --text-muted:        var(--pencil-soft);
  --text-on-color:     var(--cream);

  --accent:            var(--cobalt);
  --accent-press:      var(--cobalt-deep);
  --accent-warm:       var(--orange);
  --accent-soft:       var(--coral);
  --accent-quiet:      var(--lilac);

  --line:              #2B2B2B;            /* hand-drawn contour ink */
  --border:            rgba(43,43,43,0.16); /* hairline divider */
  --border-strong:     rgba(43,43,43,0.40);

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

  --selection-bg:      var(--lilac);
  --selection-fg:      var(--ink);

  /* ---- Family ---- */
  --font-mono: 'Inacupcake Mono', 'Courier Prime', 'Courier New', Courier, monospace;
  --font-body: var(--font-mono);
  --font-display: var(--font-mono);

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-bold:    700;

  /* ---- Type scale (typewriter rhythm; small + airy) ---- */
  --text-2xs:  11px;
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   20px;
  --text-lg:   26px;
  --text-xl:   34px;
  --text-2xl:  46px;
  --text-3xl:  62px;
  --text-4xl:  84px;

  /* ---- Line height ---- */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-body:   1.6;   /* poetry breathing room */
  --leading-loose:  1.8;

  /* ---- Tracking (Courier loves a little air) ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.14em;  /* uppercase labels / signatures */

  /* ---- Semantic type roles ---- */
  --role-poem-size:    var(--text-base);
  --role-poem-leading: var(--leading-body);
  --role-poem-color:   var(--pencil);

  --role-heading-size: var(--text-2xl);
  --role-heading-color: var(--ink);

  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Page rhythm ---- */
  --page-margin:    clamp(20px, 6vw, 96px);
  --content-max:    1180px;
  --poem-measure:   58ch;     /* ideal poetry line length */

  /* ---- Radii (the brand is almost entirely sharp) ---- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;   /* used sparingly, e.g. tags */

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--border);
  --border-ink:  1.5px solid var(--ink);

  /* ---- Shadow (paper lift, never glossy) ---- */
  --shadow-none:  none;
  --shadow-paper: 0 1px 0 rgba(43,43,43,0.06), 0 8px 24px -16px rgba(43,43,43,0.30);
  --shadow-lift:  0 2px 0 rgba(43,43,43,0.07), 0 18px 40px -22px rgba(43,43,43,0.38);

  /* ---- Motion (calm, hand-paced) ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   3 · BASE layer
   The warm cream "set background", the typewriter body voice,
   and a few brand-wide defaults.
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);             /* the warm set background */
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--cobalt);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--cobalt-deep); }

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

img { max-width: 100%; display: block; }