/* ============================================================
   Koto Design System — canonical tokens + base typography
   ============================================================
   Source of truth: /Koto Design System/colors_and_type.css
   Do NOT redeclare these tokens elsewhere. Import this file
   first; everything else (components.css, shell.css, page CSS)
   should reference --bg, --fg1, --space-*, --radius-*, etc.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/koto/Inter-VariableFont.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/koto/JetBrainsMono-VariableFont.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/koto/Fraunces-VariableFont.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/koto/Fraunces-Italic-VariableFont.woff2') format('woff2-variations');
}

:root {
  /* ==========================================================
     COLOR — Base scales
     ========================================================== */

  /* Sky (primary) — pastel → deep */
  --sky-50:  #F2F7FB;
  --sky-100: #E4EEF5;
  --sky-200: #D1E2EC;
  --sky-300: #B8D4E3;   /* brand anchor */
  --sky-400: #94BDD1;
  --sky-500: #6FA3BC;
  --sky-600: #4F8AA6;
  --sky-700: #3B6E87;
  --sky-800: #2F586C;
  --sky-900: #2A4656;

  /* Periwinkle — soft blue-violet. Info, secondary highlights. */
  --peri-50:  #F4F5FC;
  --peri-100: #E7EAF7;
  --peri-200: #D4DAF0;
  --peri-300: #BFC7E8;
  --peri-500: #8693C8;
  --peri-700: #4E5B99;
  --peri-900: #2B3366;

  /* Lilac — warm dusty pink-lavender. Guest-facing moments. */
  --lilac-50:  #FAF4F7;
  --lilac-100: #F3E6ED;
  --lilac-200: #EAD3DE;
  --lilac-300: #DFC0D0;
  --lilac-500: #B588A0;
  --lilac-700: #7F5770;
  --lilac-900: #4A2F42;

  /* Butter — buttery pastel yellow. Gentle highlights. */
  --butter-50:  #FCF9EF;
  --butter-100: #F8F1DA;
  --butter-200: #F2E6B8;
  --butter-300: #EBD994;
  --butter-500: #C9B059;
  --butter-700: #8A772E;
  --butter-900: #4D4113;

  /* Neutral — near-white, lightly warm → charcoal */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FCFBF9;
  --neutral-100: #F5F3EF;
  --neutral-200: #ECE9E3;
  --neutral-300: #D8D3C9;
  --neutral-400: #B0AA9D;
  --neutral-500: #857F72;
  --neutral-600: #615B51;
  --neutral-700: #46413A;
  --neutral-800: #2D2A25;
  --neutral-900: #181613;

  /* Coral (playful accent) */
  --coral-50:  #FEF4F0;
  --coral-100: #FBE2D8;
  --coral-200: #F6C6B4;
  --coral-300: #F2A08A;
  --coral-500: #E07A5F;
  --coral-700: #B4513A;
  --coral-900: #6E2E1F;

  /* Mint (clean / safe) */
  --mint-50:  #EEFAF2;
  --mint-100: #D7F2E0;
  --mint-200: #BCE9CC;
  --mint-300: #9CDCB5;
  --mint-500: #5EBB85;
  --mint-700: #2F8A58;
  --mint-900: #124A2C;

  /* Danger red */
  --red-50:  #FDF2F1;
  --red-100: #FADAD6;
  --red-200: #F3B4AC;
  --red-300: #E98A7E;
  --red-500: #D85647;
  --red-700: #A6342A;
  --red-900: #5C1813;

  /* Amber (warnings) */
  --amber-100: #FAEBCF;
  --amber-300: #E6B86F;
  --amber-700: #8A5A1C;

  /* ==========================================================
     COLOR — Semantic
     ========================================================== */
  --bg:            var(--neutral-0);
  --bg-elevated:   var(--neutral-0);
  --bg-sunken:     var(--neutral-50);

  --fg1:           var(--neutral-900);
  --fg2:           var(--neutral-700);
  --fg3:           var(--neutral-500);
  --fg-on-primary: var(--sky-900);
  --fg-on-accent:  var(--coral-900);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --hover-bg:      rgba(42, 70, 86, 0.06);
  --press-bg:      rgba(42, 70, 86, 0.10);

  --primary:          var(--sky-300);
  --primary-hover:    var(--sky-400);
  --primary-press:    var(--sky-500);
  --primary-subtle:   var(--sky-100);

  --accent:           var(--coral-300);
  --accent-hover:     var(--coral-500);
  --accent-subtle:    var(--coral-100);

  --success:          var(--mint-300);
  --success-strong:   var(--mint-700);
  --success-subtle:   var(--mint-100);

  --warning:          var(--amber-300);
  --warning-strong:   var(--amber-700);
  --warning-subtle:   var(--amber-100);

  --danger:           var(--red-500);
  --danger-strong:    var(--red-700);
  --danger-subtle:    var(--red-50);

  --info:             var(--sky-500);
  --info-subtle:      var(--sky-100);

  --focus-ring:       0 0 0 3px rgba(111, 163, 188, 0.4);

  /* ==========================================================
     TYPE
     ========================================================== */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Fraunces', Georgia, serif;

  --t-display-size: 40px;  --t-display-lh: 1.1;   --t-display-w: 600;
  --t-h1-size:      28px;  --t-h1-lh:      1.2;   --t-h1-w:      600;
  --t-h2-size:      22px;  --t-h2-lh:      1.25;  --t-h2-w:      600;
  --t-h3-size:      18px;  --t-h3-lh:      1.35;  --t-h3-w:      550;
  --t-body-size:    15px;  --t-body-lh:    1.55;  --t-body-w:    400;
  --t-label-size:   13px;  --t-label-lh:   1.4;   --t-label-w:   500;
  --t-caption-size: 12px;  --t-caption-lh: 1.4;   --t-caption-w: 450;
  --t-mono-size:    14px;  --t-mono-lh:    1.4;   --t-mono-w:    500;

  /* ==========================================================
     SPACING — 4px base
     ========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ==========================================================
     RADII
     ========================================================== */
  --radius-sm:   6px;
  --radius-md:  10px;    /* brand default */
  --radius-lg:  14px;
  --radius-xl:  20px;    /* used by onboarding cards */
  --radius-pill: 999px;

  /* ==========================================================
     SHADOWS — tinted with sky-900, never black
     ========================================================== */
  --shadow-sm: 0 1px 2px rgba(42, 70, 86, 0.04), 0 1px 3px rgba(42, 70, 86, 0.06);
  --shadow-md: 0 2px 4px rgba(42, 70, 86, 0.05), 0 6px 16px rgba(42, 70, 86, 0.08);
  --shadow-lg: 0 10px 32px rgba(42, 70, 86, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ==========================================================
     SCHEDULE — Today live mint rail (tune without editing page CSS)
     ========================================================== */
  --today-live-rail-min:        11rem;
  --today-live-rail-max:        17rem;
  --today-live-rail-preferred:  24vw;
  --today-live-rail-width:      clamp(
    var(--today-live-rail-min),
    var(--today-live-rail-preferred),
    var(--today-live-rail-max)
  );
  /* Area title in live rail: fluid between caption and H3 for long names / narrow rail */
  --today-live-name-size:       clamp(14px, 0.45rem + 1.1vw, var(--t-h3-size));
  /* Time pill: slightly smaller when viewport/rail is tight */
  --today-live-time-size:       clamp(11px, 0.32rem + 1.5vw, var(--t-mono-size));
}

/* ============================================================
   Element-level base typography
   Scoped under html/body so legacy pages still inherit Koto
   colors + type without forcing Bootstrap resets.
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-w);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

/* Heading utilities — apply via .t-h1/.t-h2/.t-h3 to avoid
   trampling Bootstrap's <h1> sizes inside legacy pages. */
.t-display {
  font-size: var(--t-display-size); line-height: var(--t-display-lh);
  font-weight: var(--t-display-w); letter-spacing: -0.02em;
}
.t-h1 {
  font-size: var(--t-h1-size); line-height: var(--t-h1-lh);
  font-weight: var(--t-h1-w); letter-spacing: -0.015em; margin: 0;
}
.t-h2 {
  font-size: var(--t-h2-size); line-height: var(--t-h2-lh);
  font-weight: var(--t-h2-w); letter-spacing: -0.01em; margin: 0;
}
.t-h3 {
  font-size: var(--t-h3-size); line-height: var(--t-h3-lh);
  font-weight: var(--t-h3-w); letter-spacing: -0.005em; margin: 0;
}
.t-body    { font-size: var(--t-body-size);    line-height: var(--t-body-lh);    margin: 0; }
.t-label   { font-size: var(--t-label-size);   line-height: var(--t-label-lh);   font-weight: var(--t-label-w); color: var(--fg2); }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-weight: var(--t-caption-w); color: var(--fg3); }
.t-mono    { font-family: var(--font-mono); font-size: var(--t-mono-size); line-height: var(--t-mono-lh); font-weight: var(--t-mono-w); font-variant-numeric: tabular-nums; }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.925em; }

::selection { background: var(--sky-200); color: var(--sky-900); }

/* Focus ring is global. Bootstrap's :focus styles still apply
   on form controls; this only adds the soft sky ring on top. */
*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }