/* TripAlgo design tokens - the single source of truth for colours, type and spacing.
   Brand navy and orange are sampled from the official logo (tripalgo.in).
   Contrast rule: text on buttons uses navy (or red for danger) backgrounds. White text on the
   logo orange fails WCAG AA (2.78:1), so orange is an accent only, never a text background. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand navy (logo: #082354) ---- */
  --color-navy-50: #F3F4F6;
  --color-navy-100: #E1E5EA;
  --color-navy-200: #BAC1CF;
  --color-navy-300: #8491AA;
  --color-navy-500: #082354;
  --color-navy-700: #061A3F;
  --color-navy-900: #04122A;

  /* ---- Brand orange (logo: #FE7014) ---- */
  --color-orange-50: #FFF5EF;
  --color-orange-100: #FFE5D5;
  --color-orange-200: #FFC9A6;
  --color-orange-500: #FE7014;
  --color-orange-600: #D85F11;
  --color-orange-700: #AA4B0D;
  --color-orange-800: #8C3E0B;

  /* ---- Neutrals ---- */
  --color-white: #FFFFFF;
  --color-grey-50: #F6F7F9;
  --color-grey-100: #EDEFF3;
  --color-grey-200: #DDE1E8;
  --color-grey-300: #C4CAD4;
  --color-grey-500: #6B7385;
  --color-grey-600: #545C6E;
  --color-grey-700: #3D4455;
  --color-grey-900: #161B26;

  /* ---- Status ---- */
  --color-success-bg: #E7F4EC;
  --color-success-border: #9FD3B2;
  --color-success-text: #17663A;
  --color-warning-bg: #FFF4E0;
  --color-warning-border: #F5C77A;
  --color-warning-text: #8A4B00;
  --color-error-bg: #FDECEA;
  --color-error-border: #F4A7A0;
  --color-error-text: #B42318;
  --color-error-strong: #8F1C13;
  --color-info-bg: #E8F0FB;
  --color-info-border: #A8C3EC;
  --color-info-text: #1D4F91;

  /* ---- Semantic roles (use these in components) ---- */
  --text: var(--color-grey-900);
  --text-muted: var(--color-grey-600);
  --text-brand: var(--color-navy-500);
  --text-accent: var(--color-orange-700);
  --bg-page: var(--color-grey-50);
  --bg-surface: var(--color-white);
  --border: var(--color-grey-200);
  --border-input: var(--color-grey-500);
  --accent: var(--color-orange-500);
  --focus: var(--color-orange-700);

  /* ---- Typography ---- */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---- Shape ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(8 35 84 / 0.08);
  --shadow-md: 0 4px 12px rgb(8 35 84 / 0.12);
  --shadow-lg: 0 12px 32px rgb(8 35 84 / 0.24);

  /* ---- Focus (clearly visible keyboard focus, 5.6:1 against white) ---- */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---- Layout ---- */
  --container-max: 72rem;
  --tap-target: 2.75rem; /* 44px minimum touch target */
}