/* ==========================================================================
   inGo design tokens - synced from the Claude Design project
   "inGo Design System" (tokens/colors.css, typography.css, layout.css).
   Do not edit values here; change them in the design project and re-sync.
   ========================================================================== */

:root {
  /* ---- Brand: Navy ramp (primary surface family) ------------------------ */
  --navy-950: #12161f;
  --navy-900: #1c2330;
  --navy-850: #1f2735;
  --navy-800: #222b3b;
  --navy-700: #2b3749;
  --navy-600: #374559;
  --navy-500: #4a5a70;
  --navy-400: #6b7a90;
  --navy-300: #97a3b4;
  --navy-200: #c4ccd6;
  --navy-100: #e4e8ed;
  --navy-50:  #f4f6f8;

  --navy-deck-a: #203a52;
  --navy-deck-b: #283c50;

  /* ---- Brand: Amber accent ---------------------------------------------- */
  --amber-300: #ffe8b8;
  --amber-400: #ffd98a;
  --amber-500: #ffca61;
  --amber-600: #f0b23e;
  --amber-700: #cf9525;

  /* ---- Neutrals ---------------------------------------------------------- */
  --white:   #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f3;
  --gray-200: #e0e3e9;
  --gray-300: #cbd0d9;
  --gray-400: #9aa2b1;
  --gray-500: #6b7484;
  --gray-600: #4c5566;
  --gray-700: #333c4d;
  --gray-900: #1c2330;

  /* ---- Status ------------------------------------------------------------ */
  --success-500: #1ea867;
  --success-600: #17915a;
  --success-100: #e2f5ec;
  --success-text: #0d6b41;
  --warning-500: #e8952e;
  --warning-600: #cf7d1c;
  --warning-100: #fdf0dd;
  --warning-text: #98590f;
  --danger-500: #e5484d;
  --danger-600: #cc373c;
  --danger-100: #fce7e8;
  --danger-text: #9e2226;
  --info-500: #0f9ed5;
  --info-600: #0b83b3;
  --info-100: #e0f3fb;
  --info-text: #075877;

  /* ==== Semantic aliases ================================================== */
  --surface-canvas: var(--navy-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--navy-900);
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-700);

  --text-strong: var(--navy-900);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-300);
  --text-on-accent: var(--navy-900);
  --text-link: var(--info-600);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-on-dark: var(--navy-600);
  --border-focus: var(--amber-500);

  --accent: var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-contrast: var(--navy-900);

  --ring: color-mix(in srgb, var(--amber-500) 55%, transparent);

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Greycliff CF", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 62px;
  --text-6xl: 80px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  --type-display-weight: var(--fw-light);
  --type-heading-weight: var(--fw-semibold);
  --type-body-weight: var(--fw-regular);
  --type-label-weight: var(--fw-semibold);

  /* ---- Spacing, radii, shadows, layout, motion --------------------------- */
  --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-12: 48px;
  --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(28, 35, 48, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 35, 48, 0.08), 0 1px 2px rgba(28, 35, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 35, 48, 0.08), 0 2px 4px rgba(28, 35, 48, 0.04);
  --shadow-lg: 0 12px 28px rgba(28, 35, 48, 0.12), 0 4px 8px rgba(28, 35, 48, 0.05);
  --shadow-xl: 0 24px 56px rgba(28, 35, 48, 0.18);
  --shadow-accent: 0 6px 18px rgba(255, 202, 97, 0.28);

  --container-max: 1200px;
  --sidebar-width: 264px;
  --topbar-height: 64px;

  --ease-standard: cubic-bezier(0.2, 0, 0.13, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 600;
}