/* GLOVBX marketing site — design tokens.
   Merged verbatim from the DGB design system (Claude Design project
   fa23cc18-c9e5-408c-96b4-6476c8181f61): tokens/{fonts,colors,typography,spacing}.css */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Mono:wght@500;600;700&display=swap');

/* Digital Glovebox — Color tokens
   "Garage-grade clarity": brand sky-blue lifted by a deep navy for branded
   surfaces, calm cool-neutral greys, and a confident status system. */

:root {
  /* ---- Brand blue scale ---- */
  --brand-50:  #EAF5FC;
  --brand-100: #CDE8F8;
  --brand-200: #A6D6F1;
  --brand-300: #6FBEE7;
  --brand-400: #3FA5DC;
  --brand-500: #2A9BD8;
  --brand-600: #1B8DCC;   /* the brand blue — primary */
  --brand-700: #1572A6;
  --brand-800: #115C85;
  --brand-900: #0D4665;

  /* ---- Navy / ink (branded dark surfaces, hero, footers) ---- */
  --ink-900: #08243C;
  --ink-800: #0C3151;
  --ink-700: #114066;
  --ink-600: #17527F;

  /* ---- Primary role ---- */
  --primary: #1B8DCC;
  --on-primary: #FFFFFF;
  --primary-container: #DBEEFB;
  --on-primary-container: #06314C;
  --primary-hover: #1880BB;
  --primary-pressed: #1572A6;

  /* ---- Secondary (calm blue-grey) ---- */
  --secondary: #4C6173;
  --on-secondary: #FFFFFF;
  --secondary-container: #DCE8F1;
  --on-secondary-container: #0B1F2C;

  /* ---- Tertiary (rare warm accent) ---- */
  --tertiary: #2F6F5B;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #CDEBDE;

  /* ---- Neutral surfaces (cool, calm) ---- */
  --background: #F4F7FA;
  --surface: #FFFFFF;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #EFF3F8;
  --surface-container: #E9EEF4;
  --surface-container-high: #E2E9F1;
  --surface-container-highest: #DBE3ED;
  --surface-dim: #D2DAE4;

  --on-surface: #0F1B26;
  --on-surface-variant: #4A5A68;
  --outline: #758699;
  --outline-variant: #CCD6E0;

  /* ---- Error ---- */
  --error: #C0362C;
  --on-error: #FFFFFF;
  --error-container: #FBDAD5;
  --on-error-container: #410A05;

  /* ---- Status semantics (booking / event / reminder states) ---- */
  --status-pending: #B5740B;            /* amber — pending / due soon / in review */
  --status-pending-container: #FCE6BE;
  --status-pending-on-container: #3A2300;

  --status-confirmed: #1F8A52;          /* green — confirmed / complete / current */
  --status-confirmed-container: #C7EFD4;
  --status-confirmed-on-container: #04240F;

  --status-overdue: #C0362C;            /* red — overdue / expired / failed */
  --status-overdue-container: #FBDAD5;
  --status-overdue-on-container: #410A05;

  --status-info: #1B8DCC;               /* blue — informational / active */
  --status-info-container: #DBEEFB;
  --status-info-on-container: #06314C;

  /* ---- Branded gradients (hero & dark surfaces only) ---- */
  --gradient-hero: linear-gradient(150deg, #0C3151 0%, #14517E 52%, #1B8DCC 116%);   /* @kind color */
  --gradient-brand: linear-gradient(135deg, #2A9BD8 0%, #1572A6 100%);   /* @kind color */
  --gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);   /* @kind color */

  /* ---- Semantic aliases (use these in components) ---- */
  --text-primary: var(--on-surface);
  --text-secondary: var(--on-surface-variant);
  --text-disabled: #94A2B0;
  --text-on-dark: #EAF2F9;
  --text-on-dark-dim: #A9C2D6;
  --link: var(--primary);

  --surface-card: var(--surface);
  --surface-page: var(--background);
  --surface-hero: var(--ink-800);
  --border-subtle: var(--outline-variant);
  --border-strong: var(--outline);

  --scrim: rgba(8, 36, 60, 0.46);
}

/* Digital Glovebox — Typography tokens
   Sora (display) + Plus Jakarta Sans (UI/body) + Roboto Mono (plates/codes). */

:root {
  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;

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

  /* ---- Display (Sora, tight tracking) ---- */
  --display-large-size: 44px;     --display-large-line: 50px;
  --display-medium-size: 34px;    --display-medium-line: 40px;
  --display-small-size: 28px;     --display-small-line: 34px;

  /* ---- Headline (Sora) ---- */
  --headline-large-size: 26px;    --headline-large-line: 32px;
  --headline-medium-size: 22px;   --headline-medium-line: 28px;
  --headline-small-size: 19px;    --headline-small-line: 26px;

  /* ---- Title (Plus Jakarta Sans, 600) ---- */
  --title-large-size: 18px;       --title-large-line: 24px;
  --title-medium-size: 16px;      --title-medium-line: 22px;
  --title-small-size: 14px;       --title-small-line: 20px;

  /* ---- Body (Plus Jakarta Sans) ---- */
  --body-large-size: 16px;        --body-large-line: 24px;
  --body-medium-size: 14px;       --body-medium-line: 21px;
  --body-small-size: 12.5px;      --body-small-line: 18px;

  /* ---- Label (Plus Jakarta Sans, 600) ---- */
  --label-large-size: 14px;       --label-large-line: 20px;
  --label-medium-size: 12.5px;    --label-medium-line: 16px;
  --label-small-size: 11px;       --label-small-line: 16px;

  /* Tracking */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;
}

/* Digital Glovebox — Spacing, radius, elevation
   4dp grid; generous consumer-app radii; soft navy-tinted layered shadows. */

:root {
  /* ---- Spacing (4dp grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* default screen / card padding */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Corner radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;   /* default cards */
  --radius-lg: 20px;   /* feature cards, sheets */
  --radius-xl: 28px;   /* dialogs, hero panels */
  --radius-full: 999px;  /* buttons, chips, nav pill, FAB */

  /* ---- Touch ---- */
  --touch-target-min: 48px;

  /* ---- Elevation (soft, navy-tinted) ---- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(8,36,60,0.05), 0 2px 8px rgba(8,36,60,0.06);
  --elevation-2: 0 2px 4px rgba(8,36,60,0.05), 0 10px 24px rgba(8,36,60,0.09);
  --elevation-3: 0 6px 14px rgba(8,36,60,0.10), 0 18px 40px rgba(8,36,60,0.14);
  --elevation-4: 0 12px 28px rgba(8,36,60,0.16), 0 28px 60px rgba(8,36,60,0.20);

  /* ---- Branded glow (primary buttons, FAB, active states) ---- */
  --shadow-brand: 0 6px 16px rgba(27,141,204,0.34);
  --shadow-brand-sm: 0 3px 10px rgba(27,141,204,0.28);
  --shadow-hero: 0 18px 44px rgba(8,36,60,0.30);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);   /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
}