/* Tabelo - CSS Variables (Design Tokens) */

:root {
  /* Color System - Tabelo Light Mode (Professional Palette) */

  /* Backgrounds */
  --bg: #F8F6F2;
  --bg-primary: #F8F6F2;         /* Warm off-white base - makes gold pop */
  --card: #FFFFFF;                /* Pure white for cards/navbar */
  --bg-secondary: #FFFFFF;        /* Pure white surfaces */
  --bg-tertiary: #F2F0FA;         /* Light lavender for hero/footer sections */

  /* Text colors */
  --fg: #1C1C1C;
  --text-primary: #1C1C1C;        /* Softer near-black */
  --muted: #595959;
  --text-secondary: #595959;      /* Medium gray */
  --text-muted: #8A8A92;          /* Light gray for de-emphasized text */

  /* Accent colors - Tabelo Gold + Modern Indigo */
  --primary: #F5B400;             /* Signature Tabelo gold */
  --accent-primary: #F5B400;      /* Primary brand color */
  --primary-2: #E0A100;           /* Darker gold for hover */
  --accent-secondary: #6A5AE0;    /* Modern indigo for links/secondary actions */
  --accent-hover: #E0A100;        /* Primary hover state */

  /* Status colors */
  --ok: #2dd4bf;
  --err: #f87171;

  /* UI colors - Neutral tones for better readability */
  --border-subtle: #E4E2DD;       /* Low-contrast beige border */
  --overlay-light: rgba(0, 0, 0, 0.03);   /* Subtle neutral overlay */
  --overlay-medium: rgba(0, 0, 0, 0.06);  /* Medium neutral overlay */

  /* Shadows - Clean neutral shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Navbar spacing - Responsive with clamp (min, preferred, max) */
  --navbar-top-spacing: clamp(0.75rem, 2vh, 1.5rem);

  /* Border radius - Phantom style curves */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}