/**
 * Color System - Global CSS Variables
 * Central color definitions for consistent theming across the site
 */

note {
  --background: 255 255 255;        /* white */
  --surface: 252 251 249;           /* ivory */

  --foreground: 24 24 27;           /* near black */
  --muted: 113 113 122;              /* neutral */

  --primary: 184 134 11;             /* soft gold */
  --secondary: 212 175 55;           /* light gold */

  --border: 228 228 231;             /* neutral border */
}
:root {
  /* Base */
  --background: 255 255 255;        /* white */
  --surface: 248 250 252;           /* cool white (slate-50) - replaced ivory */

  /* Text */
  --foreground: 15 23 42;           /* deep slate (cooler black) */
  --muted: 100 116 139;             /* slate gray */
  --text-muted: 75 85 99;             /* slate gray */

  /* Accent */
  --primary: 49 140 203;            /* Vexere Blue (#2474E5) */
  --secondary: 29 78 216;           /* Deep Blue (#1D4ED8) for hovers/accents */
  --gold: 253 233 133;             /* Gold (#FDE985) */
  --gold-dark: 234 203 93;             /* Gold (#FDE985) */

  /* Button Colors */
  --success: 87 234 161;             /* Bright Green (#22C55E) */
  --success-fg: 218 215 205;             /* White */
  --success-bg: 87 234 161;
  --warning: 251 146 60;            /* Orange (#FB923C) */
  --danger: 255 86 86;              /* Bright Red/Pink (#EF4444) */
  --default: 63 63 70;              /* Dark Grey (#3F3F46) */

  /* UI */
  --border: 226 232 240;            /* cool gray border */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --primary-black: 0 0 0;

  --icon-color-primary: 49 140 203;
  --icon-color-secondary: 255 246 161;

  /* OTA Global Variables - Available site-wide */
  --ota-operator-max-width: 1200px;
  --ota-radius-md: 10px;
  --ota-radius-lg: 16px;
  --ota-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);
  --ota-border-subtle: 1px solid rgba(148, 163, 184, 0.35);
  --ota-gap-lg: 24px;
  --ota-text-muted: rgba(15, 23, 42, 0.7);
  --ota-bg-surface: #ffffff;
  --ota-bg-body: #f5f7fb;
  --ota-color-primary: #0052cc;
  --ota-color-text: #111827;
  --ota-color-accent: #f97316;
  --ota-color-secondary: var(--secondary);

  /* Font Size Scale - Global Typography System */
  --ota-font-xs: 0.72rem;      /* 11.52px - Extra small labels, badges */
  --ota-font-sm: 0.78rem;      /* 12.48px - Small text, labels */
  --ota-font-base: 0.85rem;    /* 13.6px - Base body text */
  --ota-font-md: 0.9rem;       /* 14.4px - Medium text, descriptions */
  --ota-font-lg: 0.95rem;      /* 15.2px - Large body text */
  --ota-font-xl: 1rem;         /* 16px - Section titles, headings */
  --ota-font-2xl: 1.2rem;      /* 19.2px - Sub-headings, card titles */
  --ota-font-3xl: 1.4rem;      /* 22.4px - Page sub-titles */
  --ota-font-4xl: 1.8rem;      /* 28.8px - Main page titles */

  /* Font Weight Scale */
  --ota-font-normal: 400;
  --ota-font-medium: 500;
  --ota-font-semibold: 600;
  --ota-font-bold: 700;
  --ota-font-extrabold: 800;

  /* Line Height Scale */
  --ota-leading-tight: 1.2;
  --ota-leading-normal: 1.5;
  --ota-leading-relaxed: 1.6;
  --ota-leading-loose: 1.8;

}

/* Helper classes for easy usage with rgb() or rgba() */
/* Example: background-color: rgb(var(--background)); */
/* Example: background-color: rgba(var(--primary) / 0.1); */