/* ============================================================
   SUUKO DESIGN SYSTEM — Foundations
   Warm, earthy, playful but professional.
   ============================================================ */

/* ----- Webfonts -----------------------------------------------
   FLAG: The Suuko wordmark is a custom-drawn elongated thin
   letterform with circular bowls and a split 'k'. We approximate
   the spirit with two Google Fonts substitutions and clearly
   flag this so the brand team can supply the real face.
     • Display / wordmark substitute: Sora (Thin/Light) —
       geometric, rounded terminals, ultra-light strokes.
     • Editorial serif (body, quotes, long-form): Newsreader —
       warm contemporary book serif with a literary feel.
     • Utility / UI sans (forms, buttons, captions): DM Sans —
       neutral, friendly, excellent at small sizes.
   --------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=DM+Sans:opsz,wght@9..40,300..700&display=swap");

:root {
  /* ====================================================
     COLOR — Warm, earthy palette
     Built around clay, ochre, terracotta, sage, umber.
     ==================================================== */

  /* Paper & cream — surfaces / canvas */
  --paper:        #FBF7F0;  /* off-white, default canvas */
  --bone:         #F2EBDD;  /* warm cream, raised surface */
  --linen:        #E6DCC7;  /* warm beige, divider/hover */
  --mushroom:     #C9BBA1;  /* soft taupe, muted UI */

  /* Ink — text on cream */
  --umber:        #2C211A;  /* near-black ink (primary text) */
  --bark:         #4A3B30;  /* secondary text */
  --driftwood:    #7A6A5A;  /* tertiary / metadata */

  /* Earth — clays & terracotta (primary brand accent) */
  --clay-50:      #F6E6DC;
  --clay-100:    #EFD0BC;
  --clay-200:    #E2A483;
  --clay-300:    #CF7A55;
  --clay-400:    #B85A36;  /* PRIMARY — Suuko terracotta */
  --clay-500:    #98442A;
  --clay-600:    #6E2F1E;

  /* Ochre — mustard / sun (warm secondary) */
  --ochre-50:    #FBF1D7;
  --ochre-100:  #F4DDA0;
  --ochre-300:  #E3B85A;
  --ochre-400:  #C99A34;  /* SECONDARY — golden ochre */
  --ochre-600:  #8A6818;

  /* Sage — olive/moss (cool counterpoint) */
  --sage-50:    #E9EBDC;
  --sage-200:  #BFC59E;
  --sage-400:  #7E8B5A;  /* TERTIARY — sage */
  --sage-600:  #4E582E;

  /* Rose — dusty rose (soft accent, used sparingly) */
  --rose-100:    #F1D8CD;
  --rose-300:    #D9A89C;
  --rose-500:    #B47B6F;

  /* Plum — bruised berry (rare, for emphasis) */
  --plum-400:    #6B3A4E;

  /* Semantic */
  --color-bg:           var(--paper);
  --color-surface:      var(--bone);
  --color-surface-2:    var(--linen);
  --color-border:       var(--linen);
  --color-border-strong: var(--mushroom);

  --color-fg:           var(--umber);
  --color-fg-muted:     var(--bark);
  --color-fg-subtle:    var(--driftwood);
  --color-fg-on-clay:   var(--paper);

  --color-accent:       var(--clay-400);
  --color-accent-hover: var(--clay-500);
  --color-accent-soft:  var(--clay-50);

  --color-secondary:    var(--ochre-400);
  --color-tertiary:     var(--sage-400);

  --color-success:      var(--sage-400);
  --color-warning:      var(--ochre-400);
  --color-danger:       var(--clay-500);

  /* Focus ring */
  --ring:               0 0 0 3px rgba(184, 90, 54, 0.28); /* clay glow */

  /* ====================================================
     TYPE
     ==================================================== */
  --font-display: "Sora", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:    "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale — gentle major-third (1.25), generous leading */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-display: 128px;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.72;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.18em;  /* small-caps eyebrow labels */

  /* ====================================================
     SPACING — 4px base, 8pt-aligned at common steps
     ==================================================== */
  --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;

  /* ====================================================
     RADII — soft, hand-cut feel. No 100px pills by default.
     ==================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ====================================================
     SHADOWS — warm, low, never blue
     ==================================================== */
  --shadow-xs: 0 1px 2px rgba(74, 59, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(74, 59, 48, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(74, 59, 48, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(74, 59, 48, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                  inset 0 -1px 0 rgba(74, 59, 48, 0.06);

  /* ====================================================
     MOTION — slow, organic
     ==================================================== */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPE — drop-in element styles
   ============================================================ */

html { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); }
body { font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-fg-muted);
  text-wrap: pretty;
  margin: 0;
}

.lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--color-fg);
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-subtle);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-fg-subtle);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bone);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
}

a {
  color: var(--clay-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(152, 68, 42, 0.35);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--clay-400); text-decoration-color: currentColor; }

::selection { background: var(--clay-100); color: var(--umber); }