/* ============================================================
   Keystone Clearwater — Color & Type Tokens
   Inspired by Tamagui's clean token-based system (Radix-style
   scales, single brand accent, neutral slate, semantic colors).
   ============================================================ */

/* ---- FONTS ----
   Manrope — friendly geometric sans, clean modern character with
   slightly more warmth than Inter. JetBrains Mono for code & ticket IDs.
   Loaded from Google Fonts. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ===== BRAND ===== */
  --brand-iris-50:  #F0F1FE;
  --brand-iris-100: #E1E2FD;
  --brand-iris-200: #C7C9FB;
  --brand-iris-300: #A5A8F7;
  --brand-iris-400: #8284F0;
  --brand-iris-500: #6366E6;          /* primary brand */
  --brand-iris-600: #4F46E5;          /* hover / pressed */
  --brand-iris-700: #4338CA;
  --brand-iris-800: #3730A3;
  --brand-iris-900: #1E1B4B;

  --brand: var(--brand-iris-500);
  --brand-hover: var(--brand-iris-600);
  --brand-press: var(--brand-iris-700);
  --brand-soft:  var(--brand-iris-50);
  --brand-on:    #FFFFFF;             /* text on brand */

  /* Warm accent — used sparingly: ticket priority, highlights */
  --accent-amber-400: #FBBF24;
  --accent-amber-500: #F59E0B;
  --accent-amber-600: #D97706;
  --accent: var(--accent-amber-500);

  /* ===== NEUTRALS (slate, Radix-ish 12-step) ===== */
  --slate-1:  #FCFCFD;   /* app bg */
  --slate-2:  #F8F9FB;   /* subtle bg */
  --slate-3:  #F1F2F6;   /* hover bg */
  --slate-4:  #E8EAF0;   /* active bg */
  --slate-5:  #DFE2EA;   /* line subtle */
  --slate-6:  #D4D8E1;   /* line */
  --slate-7:  #C2C7D3;   /* line strong / border on press */
  --slate-8:  #A8AEBE;   /* divider strong */
  --slate-9:  #8B92A4;   /* placeholder */
  --slate-10: #6B7180;   /* text dim */
  --slate-11: #4A4F5C;   /* text body */
  --slate-12: #0F1115;   /* text strong */

  /* ===== SEMANTIC ===== */
  --success-bg:  #ECFDF5;
  --success:     #10B981;
  --success-fg:  #065F46;

  --warning-bg: #FFFBEB;
  --warning:    #F59E0B;
  --warning-fg: #92400E;

  --danger-bg:  #FEF2F2;
  --danger:     #EF4444;
  --danger-fg:  #991B1B;

  --info-bg:    #EFF6FF;
  --info:       #3B82F6;
  --info-fg:    #1E40AF;

  /* ===== SURFACES / FG ===== */
  --bg:        var(--slate-1);
  --bg-elev-1: #FFFFFF;        /* card */
  --bg-elev-2: #FFFFFF;        /* dialog */
  --bg-subtle: var(--slate-2);
  --bg-hover:  var(--slate-3);
  --bg-active: var(--slate-4);

  --fg:        var(--slate-12);
  --fg-1:      var(--slate-12); /* strongest */
  --fg-2:      var(--slate-11); /* body */
  --fg-3:      var(--slate-10); /* dim */
  --fg-4:      var(--slate-9);  /* placeholder */

  --line:      var(--slate-5);
  --line-strong: var(--slate-7);

  /* ===== RADIUS ===== */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 24px;
  --r-pill: 999px;

  /* ===== SPACING (4pt) ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;

  /* ===== SHADOWS (soft, layered — tamagui-style) ===== */
  --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.04), 0 0 0 1px rgba(15, 17, 21, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 17, 21, 0.05), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 17, 21, 0.08), 0 2px 4px rgba(15, 17, 21, 0.04);
  --shadow-lg: 0 16px 32px -8px rgba(15, 17, 21, 0.12), 0 4px 8px rgba(15, 17, 21, 0.04);
  --shadow-xl: 0 24px 56px -12px rgba(15, 17, 21, 0.18), 0 8px 16px rgba(15, 17, 21, 0.06);
  --shadow-brand: 0 8px 24px -6px rgba(99, 102, 230, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(15, 17, 21, 0.04);

  /* ===== MOTION ===== */
  --ease-spring: linear(0, 0.5 7.5%, 0.85 15%, 1.02 22%, 1.05 27%, 1.02 35%, 0.99 42%, 0.98 50%, 0.99 60%, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 700ms;

  /* ===== TYPE BASE ===== */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Size / line-height pairs — tamagui-style vertical rhythm */
  --t-xs:   11px;  --lh-xs:   16px;
  --t-sm:   13px;  --lh-sm:   18px;
  --t-base: 15px;  --lh-base: 22px;
  --t-md:   17px;  --lh-md:   24px;
  --t-lg:   20px;  --lh-lg:   28px;
  --t-xl:   24px;  --lh-xl:   32px;
  --t-2xl:  30px;  --lh-2xl:  36px;
  --t-3xl:  38px;  --lh-3xl:  44px;
  --t-4xl:  48px;  --lh-4xl:  56px;
  --t-5xl:  64px;  --lh-5xl:  68px;

  /* Tracking — tighter on display */
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;
}

/* ===== DARK THEME ===== */
.dark, [data-theme="dark"] {
  --bg:        #0A0B0F;
  --bg-elev-1: #14161C;
  --bg-elev-2: #1B1E26;
  --bg-subtle: #0F1117;
  --bg-hover:  #1B1E26;
  --bg-active: #232732;

  --fg-1: #F4F5F8;
  --fg-2: #C6CAD3;
  --fg-3: #8B92A4;
  --fg-4: #545A6B;

  --line:        #232732;
  --line-strong: #353B47;

  --brand: #8284F0;
  --brand-hover: #A5A8F7;
  --brand-soft: rgba(99, 102, 230, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 8px 24px -6px rgba(130, 132, 240, 0.4);
}

/* ===== SEMANTIC TYPE CLASSES ===== */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg-1);
  background: var(--bg);
}

.t-display-xl, h1.display {
  font-size: var(--t-5xl); line-height: var(--lh-5xl);
  letter-spacing: var(--tracking-tight); font-weight: 700;
}
.t-display, h1 {
  font-size: var(--t-4xl); line-height: var(--lh-4xl);
  letter-spacing: var(--tracking-tight); font-weight: 700;
}
.t-h1 {
  font-size: var(--t-3xl); line-height: var(--lh-3xl);
  letter-spacing: var(--tracking-snug); font-weight: 700;
}
.t-h2, h2 {
  font-size: var(--t-2xl); line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-snug); font-weight: 600;
}
.t-h3, h3 {
  font-size: var(--t-xl); line-height: var(--lh-xl);
  letter-spacing: var(--tracking-snug); font-weight: 600;
}
.t-h4, h4 {
  font-size: var(--t-lg); line-height: var(--lh-lg);
  letter-spacing: var(--tracking-snug); font-weight: 600;
}
.t-lead {
  font-size: var(--t-md); line-height: var(--lh-md);
  color: var(--fg-2); font-weight: 400;
}
.t-body, p {
  font-size: var(--t-base); line-height: var(--lh-base);
  color: var(--fg-2); font-weight: 400;
}
.t-small {
  font-size: var(--t-sm); line-height: var(--lh-sm);
  color: var(--fg-3); font-weight: 400;
}
.t-caption {
  font-size: var(--t-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3); font-weight: 500;
}
.t-overline {
  font-size: var(--t-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3); font-weight: 600;
  text-transform: uppercase;
}
.t-code, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-snug);
}
.t-mono-id {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-3);
}