/* ============================================================
   Bacio — Design Tokens
   Paper-and-ink with one warm accent. Warm-gray neutrals only.
   ============================================================ */

/* Self-hosted webfonts — latin + latin-ext subsets, woff2 only.
   Files in /fonts/. Regenerate with scripts in commit history if needed. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/caveat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/caveat-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Supplemental subset: full upstream JetBrains Mono coverage for the
   glyphs the bacio TUI emits — box-drawing, block elements, geometric
   shapes, arrows, misc technical/symbols/dingbats. The Google-Fonts
   subsets above stop at basic Latin, so without this the terminal
   falls back to Menlo/Consolas for ─ │ → ▌ ⚠ etc. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-symbols.woff2') format('woff2');
  unicode-range: U+2070-27BF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500-symbols.woff2') format('woff2');
  unicode-range: U+2070-27BF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600-symbols.woff2') format('woff2');
  unicode-range: U+2070-27BF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/nunito-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/nunito-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---------- Brand (Sky pastel — "blueberry sorbet") ---------- */
  --sky-50:  #EEF4FE;
  --sky-100: #DCE7FB;
  --sky-300: #9DC1F2;
  --sky-500: #6BA3E8;     /* Primary — pastel sky blue, a touch softer */
  --sky-600: #4684D2;
  --sky-700: #316BB1;

  /* Legacy aliases so existing tokens (—coral-*) keep working */
  --coral-50:  var(--sky-50);
  --coral-100: var(--sky-100);
  --coral-300: var(--sky-300);
  --coral-500: var(--sky-500);
  --coral-600: var(--sky-600);
  --coral-700: var(--sky-700);

  /* ---------- Surfaces (cool paper) ---------- */
  --paper:      #FFFFFF;   /* Card / input fill */
  --cream:      #F2F6FC;   /* App canvas — cool off-white */
  --cream-deep: #E6EEF8;   /* Sidebar, sunken areas */

  /* ---------- Ink (cool-slate ramp, single track) ---------- */
  --ink-0:    #FAFBFD;
  --ink-50:   #EEF2F7;
  --ink-100:  #DDE4EE;
  --ink-200:  #C2CCDB;
  --ink-300:  #9AA6BB;
  --ink-400:  #74819A;
  --ink-500:  #586581;
  --ink-600:  #3F4B65;
  --ink-700:  #2A344A;
  --ink-800:  #1B2336;
  --ink-900:  #0F1626;     /* Body text */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink-900);  /* Headings, primary body */
  --fg-2: var(--ink-700);  /* Secondary body */
  --fg-3: var(--ink-500);  /* Tertiary, metadata */
  --fg-4: var(--ink-400);  /* Disabled, subtle hints */
  --fg-on-coral: var(--paper);    /* legacy alias */
  --fg-on-primary: var(--paper);

  --bg-1: var(--cream);    /* App canvas */
  --bg-2: var(--paper);    /* Cards */
  --bg-3: var(--cream-deep);/* Sidebar */
  --bg-4: var(--ink-50);   /* Hover ghost */

  --border-1: var(--ink-100); /* Default hairline */
  --border-2: var(--ink-200); /* Hover / stronger */
  --border-3: var(--ink-50);  /* Subtle column divider */
  --border-focus: var(--coral-500);

  /* ---------- Status (gelato flavors) ----------
     Each pair is a scoop: a deeper edge for icons/text + a creamier
     tint for column/pill fills. Names are flavors so the team
     remembers we're at the gelato counter, not the dashboard. */
  --status-todo:        #6E7990;  /* vanilla bean — neutral cool slate */
  --status-todo-bg:     #ECEFF5;
  --status-doing:       #D49A2E;  /* honey — warm pop, pours over everything */
  --status-doing-bg:    #FBECCB;
  --status-review:      #9C7CD8;  /* lavender — soft, contemplative */
  --status-review-bg:   #EDE3FA;
  --status-done:        #6FA86A;  /* pistachio — paler, fresher green */
  --status-done-bg:     #DDEED4;
  --status-blocked:     #D27187;  /* raspberry sorbet — pink, not alarm-red */
  --status-blocked-bg:  #F8DDE3;
  --status-claude:      #5DB3A6;  /* mint stracciatella — claude's flavor */
  --status-claude-bg:   #D5ECE5;

  /* ---------- Type ---------- */
  --font-sans: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — 1.25 ratio anchored at 16px body */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;       /* Body */
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Tracking */
  --track-tight: -0.02em;
  --track-normal: 0;
  --track-loose: 0.06em;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-ui:    1.4;
  --lh-body:  1.5;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;   /* Badges, mono pills */
  --radius-md: 8px;   /* Buttons, inputs */
  --radius-lg: 12px;  /* Cards, modals */
  --radius-xl: 20px;  /* Sheets, drawers */
  --radius-full: 9999px;

  /* ---------- Shadows (warm-tinted, no blue) ---------- */
  --shadow-1: 0 1px 0 rgba(27, 35, 54, 0.04), 0 1px 2px rgba(27, 35, 54, 0.05);
  --shadow-2: 0 4px 8px rgba(27, 35, 54, 0.08), 0 2px 4px rgba(27, 35, 54, 0.06);
  --shadow-3: 0 8px 16px rgba(27, 35, 54, 0.10), 0 4px 8px rgba(27, 35, 54, 0.06);
  --shadow-4: 0 16px 32px rgba(27, 35, 54, 0.18), 0 8px 16px rgba(27, 35, 54, 0.10);
  --shadow-pressed: inset 0 1px 0 rgba(27, 35, 54, 0.10);
  --shadow-focus:   0 0 0 2px var(--cream), 0 0 0 4px var(--sky-500);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-medium: 180ms;
  --dur-slow:   240ms;
}

/* ============================================================
   Semantic type styles — apply via class
   ============================================================ */

.t-display-1, h1.display {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-ui);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-ui {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-ui);
  color: var(--fg-1);
}
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-ui);
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-2);
}
.t-mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  background: var(--ink-50);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

/* ============================================================
   Base resets — apply at the page level if you want them
   ============================================================ */
.mk-base {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mk-base * { box-sizing: border-box; }