/* =============================================================================
   tokens.css — Design tokens
   -----------------------------------------------------------------------------
   Single source of truth for the CarCareLog visual language. Every color,
   spacing, radius, shadow, type and layout value used by base.css, layout.css
   and components.css is defined here as a CSS custom property.

   Do NOT hardcode colors/spacing/radii/shadows elsewhere — reference these
   variables instead. Loaded first, before base/layout/components.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Color palette
     ------------------------------------------------------------------------- */
  --color-bg: #f6f7f9;                 /* app background */
  --color-surface: #ffffff;            /* cards, nav, inputs */
  --color-text: #1c2430;               /* primary text */
  --color-text-muted: #5b6675;         /* secondary / helper text */

  --color-primary: #2f6df6;            /* primary blue accent */
  --color-primary-hover: #2459d6;      /* darker blue for hover/active */
  --color-primary-contrast: #ffffff;   /* text/icons on primary surfaces */

  --color-success: #2e9e6b;            /* success states */
  --color-danger: #d9444f;             /* destructive / error states */
  --color-danger-hover: #bf3b45;       /* darker danger for hover/active */
  --color-warning: #d98c1f;            /* warnings / attention */

  --color-border: #e2e6ec;             /* hairline borders, dividers */

  /* Soft tinted backgrounds derived from the palette (badges, subtle fills).
     Kept as their own tokens so components never invent ad-hoc colors. */
  --color-primary-soft: #e7effe;
  --color-success-soft: #e3f4ec;
  --color-danger-soft: #fbe6e8;
  --color-warning-soft: #fbf0db;
  --color-muted-soft: #eef1f5;

  /* Overlay / scrim (loading overlay, modal backdrops) */
  --color-overlay: rgba(16, 24, 40, .45);

  /* ---------------------------------------------------------------------------
     Spacing scale (4px base)
     ------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ---------------------------------------------------------------------------
     Border radii
     ------------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     Elevation / shadows
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, .14);

  /* ---------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --text-sm: .875rem;    /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.5;
  --line-height-tight: 1.25;

  /* ---------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------- */
  --container-max: 1100px;       /* max content width */
  --tap-min: 44px;               /* minimum tap target (>=44x44px) */
  --breakpoint-mobile: 600px;    /* <=600 single column, >=601 multi-column */
  --header-height: 60px;         /* sticky header height */

  /* ---------------------------------------------------------------------------
     Focus ring — accessible keyboard focus indicator
     ------------------------------------------------------------------------- */
  --focus-ring-color: rgba(47, 109, 246, .45);
  --focus-ring-width: 3px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* ---------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* Color scheme hint for native form controls/scrollbars */
  color-scheme: light;
}

/* =============================================================================
   Dark theme — activated by <html data-theme="dark">. Overrides only the
   color tokens; spacing/radii/typography stay identical so layout is stable.
   ============================================================================= */
:root[data-theme="dark"] {
  --color-bg: #0f141b;
  --color-surface: #161d27;
  --color-text: #e7ecf3;
  --color-text-muted: #9aa7b8;

  --color-primary: #4f86ff;
  --color-primary-hover: #6f9bff;
  --color-primary-contrast: #0b0f15;

  --color-success: #43c08a;
  --color-danger: #ef5a64;
  --color-danger-hover: #ff6f78;
  --color-warning: #e3a44b;

  --color-border: #2a3340;

  --color-primary-soft: #1b2740;
  --color-success-soft: #15302a;
  --color-danger-soft: #361c20;
  --color-warning-soft: #322615;
  --color-muted-soft: #1d2530;

  --color-overlay: rgba(0, 0, 0, .6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .6);

  --focus-ring-color: rgba(79, 134, 255, .55);

  color-scheme: dark;
}