/* Design tokens: colors, radii, shadows, spacing */
:root {

  /* Core tokens: transitions, timing */
  --transition-duration: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: var(--transition-duration) var(--ease);

  /* Brand color scale (canonical) */
  /* primary */
  --primary-100: #93c5fd; /* lightest */
  --primary-200: #60a5fa;
  --primary-300: #3b82f6;
  --primary-500: #2a62bc; /* primary */
  --primary-700: #1e4a8a;
  --primary-800: #1e3a8a;
  --primary-900: #0e1747; /* darkest */
/* secondary */
  --secondary-100: #fcd34d; /* lightest */
  --secondary-200: #fbbf24;
  --secondary-300: #f59e0b;
  --secondary-500: #d97706; /* primary */
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f; /* darkest */
  

  /* Semantic surface/text tokens */
  --surface: #ffffff;
  --on-surface: #000000;
  --surface-muted: rgba(0, 0, 0, 0.6);
  --on-primary: #ffffff;

  /* Surface variants for nav/input */
  --surface-nav: rgba(255, 255, 255, 0.15);
  --surface-nav-border: rgba(255, 255, 255, 0.2);
  --surface-input: #ffffff;
  --surface-input-border: rgba(0, 0, 0, 0.23);

  /* Backward-compatible brand aliases */
  --brand-color: var(--primary-500);
  --brand-color-light: var(--primary-300);
  --brand-color-lighter: var(--primary-200);
  --brand-color-lightest: var(--primary-100);
  --brand-color-dark: var(--primary-700);
  --brand-color-darker: var(--primary-800);
  --brand-color-darkest: var(--primary-900);

  /* app color aliases (map to primary scale) */
  --app-color-primary: var(--primary-300);
  --app-color-primary-dark: var(--primary-700);
  --app-color-primary-light: var(--primary-100);
  --app-color-primary-lighter: var(--primary-200);
  --app-color-primary-lightest: #ffffff;
  --app-color-primary-darker: var(--primary-800);
  --app-color-primary-darkest: var(--primary-900);


    /* legacy app color definitions consolidated — use the canonical `--primary-*` scale and `--app-color-primary` aliases above */

  /* Page (aliases to semantic tokens) */
  --page-bg: var(--surface);
  --text-color: var(--on-surface);

  /* Navbar - More transparent glass effect */
  --nav-bg: var(--surface-nav);
  --nav-border-color: var(--surface-nav-border);
  --nav-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --nav-radius: 22px;

  /* Icons - Using primary color tokens */
  --nav-icon-bg: radial-gradient(circle at 30% 0, var(--primary-300), var(--primary-900));
  --nav-icon-bg-active: radial-gradient(circle at 30% 0, var(--primary-500), var(--primary-700));
  --nav-icon-color: rgba(0, 0, 0, 0.6);
  --nav-icon-color-active: var(--primary-500);
  --nav-icon-color-hover: var(--primary-500);

  /* Text */
  --nav-label-color: rgba(0, 0, 0, 0.7);
  --nav-label-color-active: var(--primary-500);
  --nav-label-color-hover: var(--primary-500);
  
  /* Hover states - Google Material Design */
  --nav-item-hover-bg: rgba(0, 0, 0, 0.04);
  --nav-item-hover-scale: 1.05;

  /* Profile pill */
  --nav-profile-bg: rgba(255, 255, 255, 0.2);
  --nav-profile-border: rgba(255, 255, 255, 0.3);

  /* Apps dropdown */
  --nav-apps-bg: rgba(255, 255, 255, 0.95);
  --nav-apps-border: rgba(0, 0, 0, 0.1);
  --nav-apps-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  --nav-apps-item-text: rgba(0, 0, 0, 0.85);
  --nav-apps-item-subtext: rgba(0, 0, 0, 0.55);
  --nav-apps-item-hover-bg: rgba(0, 0, 0, 0.05);

  /* Profile dropdown */
  --nav-profile-menu-bg: rgba(255, 255, 255, 0.95);
  --nav-profile-menu-border: rgba(0, 0, 0, 0.1);
  --nav-profile-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  --nav-profile-item-text: rgba(0, 0, 0, 0.85);
  --nav-profile-item-subtext: rgba(0, 0, 0, 0.55);
  --nav-profile-item-hover-bg: rgba(0, 0, 0, 0.05);

  /* Form elements - Material UI inspired */
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.23);
  --input-border-focus: var(--primary-500);
  --input-border-error: #d32f2f;
  --input-text: rgba(0, 0, 0, 0.87);
  --input-label: rgba(0, 0, 0, 0.6);
  --input-label-focus: var(--primary-500);
  --input-helper-text: rgba(0, 0, 0, 0.6);
  --input-radius: 4px;
  --input-padding: 16.5px 14px;
  --input-transition: var(--transition);

  /* Buttons - Material UI inspired */
  --btn-primary-bg: var(--primary-500);
  --btn-primary-text: var(--on-primary);
  --btn-primary-hover: var(--primary-700);
  --btn-text-color: var(--primary-500);
  --btn-text-hover: var(--primary-700);
  --btn-radius: 4px;
  --btn-padding: 10px 16px;
  --btn-elevation: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
                   0px 2px 2px 0px rgba(0, 0, 0, 0.14),
                   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --btn-elevation-hover: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
                         0px 4px 5px 0px rgba(0, 0, 0, 0.14),
                         0px 1px 10px 0px rgba(0, 0, 0, 0.12);

  /* Checkbox - Material UI inspired */
  --checkbox-color: var(--primary-500);
  --checkbox-border: rgba(0, 0, 0, 0.54);
  --checkbox-size: 18px;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b1218;
    --on-surface: rgba(255, 255, 255, 0.92);
    --surface-muted: rgba(255, 255, 255, 0.7);

    --surface-nav: rgba(10, 15, 22, 0.6);
    --surface-nav-border: rgba(255, 255, 255, 0.06);

    --surface-input: #0f1724;
    --surface-input-border: rgba(255, 255, 255, 0.08);
    --input-text: rgba(255, 255, 255, 0.92);
    --input-label: rgba(255,255,255,0.7);

    /* Keep primary color but increase contrast if needed */
    --nav-icon-color: rgba(255, 255, 255, 0.9);
  }
}