/* ============================================================
   Drawer Studio — Colors & Type
   Single source of truth. Import this in every preview, kit, and slide.
   ============================================================ */

/* ---- Fonts ----
   Inter Tight (display + body) and JetBrains Mono (numerics) are loaded
   from Google Fonts as the closest free matches to the intended licensed
   faces (Söhne / Berkeley Mono). If real licenses arrive, drop .woff2 in
   fonts/ and replace these @import lines with @font-face blocks. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLORS
     ============================================================ */

  /* Paper — backgrounds (warm off-white, slightly ochre) */
  --paper:           #F4EFE6;   /* default page background */
  --paper-raised:    #FBF8F2;   /* cards, modals, panels above the page */
  --paper-sunk:      #E8E1D2;   /* wells, recessed inputs, grid lines */
  --paper-edge:      #D9D0BD;   /* divider on Paper, stronger sunk */

  /* Ink — text and lines (warm brown-black, never pure #000) */
  --ink:             #1A1814;   /* primary text, primary fills */
  --ink-secondary:   #3D3833;   /* secondary text, hover state for ink fills */
  --ink-tertiary:    #7A726A;   /* captions, helper text */
  --ink-disabled:    #B8AFA0;   /* disabled labels, dimension-line gray */
  --ink-line:        rgba(26, 24, 20, 0.12); /* default 1px borders */
  --ink-line-strong: rgba(26, 24, 20, 0.20); /* hovered borders */
  --ink-line-faint:  rgba(26, 24, 20, 0.06); /* grid lines, very subtle dividers */

  /* Sienna — the one accent. Pro variations, primary CTAs, focus, dim arrows. */
  --sienna:          #C2541A;
  --sienna-hover:    #A84613;
  --sienna-soft:     #F2DCC8;   /* tinted Sienna over Paper, for variation-tag fills */
  --sienna-ink:      #6B2D0E;   /* sienna text on sienna-soft backgrounds */

  /* Semantic — same warm-neutral family, no cool blues */
  --ok:              #3B7A3B;   /* printable, fits */
  --ok-soft:         #DCE8D5;
  --warn:            #8A6A1F;   /* close to print-bed limit, tolerance tight */
  --warn-soft:       #EFE3C5;
  --bad:             #A33A2A;   /* won't fit, blocked */
  --bad-soft:        #EDD3CC;

  /* Focus ring — always Sienna */
  --focus:           var(--sienna);
  --focus-ring:      0 0 0 2px var(--paper), 0 0 0 4px var(--sienna);

  /* Elevation — minimal. One shadow level, used on raised dialogs only. */
  --elev-0:          none;
  --elev-1:          0 1px 0 rgba(26, 24, 20, 0.04),
                     0 8px 24px -12px rgba(26, 24, 20, 0.18);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-sans:  "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — scale (px)
     Anything not on this scale is wrong. Don't invent new sizes.
     ============================================================ */
  --t-display:  64px;   /* landing hero */
  --t-h1:       40px;   /* section title */
  --t-h2:       28px;   /* subsection */
  --t-h3:       20px;   /* card title */
  --t-body:     16px;   /* body */
  --t-small:    14px;   /* caption, secondary */
  --t-micro:    12px;   /* dimension labels, metadata */

  /* line-heights */
  --lh-display: 1.05;
  --lh-tight:   1.2;
  --lh-body:    1.55;

  /* tracking */
  --tr-display: -0.02em;
  --tr-h1:      -0.015em;
  --tr-h2:      -0.01em;
  --tr-body:    0em;
  --tr-mono:    0.04em;     /* mono micro labels get a touch of opening */

  /* ============================================================
     SPACING (4 px base)
     Allowed values: 4 8 12 16 24 32 48 64 96. Nothing else.
     ============================================================ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-6:   24px;
  --s-8:   32px;
  --s-12:  48px;
  --s-16:  64px;
  --s-24:  96px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-0:   0px;
  --r-1:   2px;    /* SKU tags, mono chips */
  --r-2:   4px;    /* buttons, inputs, default */
  --r-3:   8px;    /* cards, modals */
  --r-pill: 999px; /* pro-variation pills ONLY */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:           cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast:       120ms;   /* state change */
  --dur-medium:     240ms;   /* layout shift */
  --dur-slow:       400ms;   /* canvas "fits!" reveal */
}

/* ============================================================
   SEMANTIC ELEMENTS — defaults so unstyled HTML still looks right
   ============================================================ */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .ds-display {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h1);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h2);
  font-weight: 600;
  margin: 0;
}
h4, .h4 {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  font-weight: 600;
  margin: 0;
}

p, .body { font-size: var(--t-body); line-height: var(--lh-body); margin: 0; }
.small   { font-size: var(--t-small); line-height: 1.45; color: var(--ink-secondary); }
.micro   { font-size: var(--t-micro); line-height: 1.4; color: var(--ink-tertiary); letter-spacing: var(--tr-mono); text-transform: uppercase; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
}

/* dimension callout — used heavily across kits */
.dim {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-mono);
  color: var(--ink-tertiary);
  text-transform: none;
}

/* focus is always sienna, always visible */
:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 2px;
  border-radius: 2px;
}

/* selection */
::selection {
  background: var(--sienna);
  color: var(--paper-raised);
}