/* =============================================================================
   THE 60-MINUTE CLINICIAN MBA — DESIGN TOKENS
   Complete token system for building consistent, scalable UI

   Authors: Dr. Mahesh Krishnan & Dr. Shamiram Feinglass
   Book: "Pearls of Wisdom from Clinician Leaders to Help You Master
         Going from the Clinic to the C-suite"
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@400;500;600;700;800;900&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* =============================================================================
   PRIMITIVE TOKENS — Raw values, reference only
   ============================================================================= */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     COLOR PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  /* Navy Scale — Executive Trust & Authority */
  --primitive-navy-50: #F0F4F8;
  --primitive-navy-100: #D9E2EC;
  --primitive-navy-200: #BCCCDC;
  --primitive-navy-300: #9FB3C8;
  --primitive-navy-400: #829AB1;
  --primitive-navy-500: #627D98;
  --primitive-navy-600: #486581;
  --primitive-navy-700: #334E68;
  --primitive-navy-800: #243B53;
  --primitive-navy-900: #1E3A5F;
  --primitive-navy-950: #102A43;

  /* Gold Scale — Leadership & Premium Value */
  --primitive-gold-50: #FDF8ED;
  --primitive-gold-100: #F9EDCF;
  --primitive-gold-200: #F3DDA8;
  --primitive-gold-300: #EBCA76;
  --primitive-gold-400: #E4B84E;
  --primitive-gold-500: #D4A84B;
  --primitive-gold-600: #C49A3D;
  --primitive-gold-700: #B8892F;
  --primitive-gold-800: #9A7328;
  --primitive-gold-900: #7D5D21;

  /* Teal Scale — Links & Secondary Actions */
  --primitive-teal-50: #E6F0F5;
  --primitive-teal-100: #CCE1EB;
  --primitive-teal-200: #99C3D7;
  --primitive-teal-300: #66A5C3;
  --primitive-teal-400: #3387AF;
  --primitive-teal-500: #2D5F8A;
  --primitive-teal-600: #264F73;
  --primitive-teal-700: #1F3F5C;
  --primitive-teal-800: #182F45;
  --primitive-teal-900: #111F2E;

  /* Neutral Scale */
  --primitive-neutral-0: #FFFFFF;
  --primitive-neutral-50: #F7FAFC;
  --primitive-neutral-100: #EDF2F7;
  --primitive-neutral-200: #E2E8F0;
  --primitive-neutral-300: #CBD5E0;
  --primitive-neutral-400: #A0AEC0;
  --primitive-neutral-500: #718096;
  --primitive-neutral-600: #4A5568;
  --primitive-neutral-700: #2D3748;
  --primitive-neutral-800: #1A202C;
  --primitive-neutral-900: #171923;

  /* Clinical Scale — Healthcare Context */
  --primitive-clinical-50: #F8FAFC;
  --primitive-clinical-100: #F1F5F9;
  --primitive-clinical-200: #E8EEF4;
  --primitive-clinical-300: #DCE4ED;
  --primitive-clinical-400: #C9D5E3;
  --primitive-clinical-500: #B5C5D8;

  /* Cream Scale — Warm Alternates */
  --primitive-cream-50: #FDFCFA;
  --primitive-cream-100: #FAF7F2;
  --primitive-cream-200: #F5EFE0;
  --primitive-cream-300: #EFE5D0;
  --primitive-cream-400: #E5D8BC;

  /* Success */
  --primitive-success-50: #E6F4EE;
  --primitive-success-100: #C0E4D5;
  --primitive-success-500: #2E7D5A;
  --primitive-success-700: #215C42;

  /* Warning */
  --primitive-warning-50: #FEF3E6;
  --primitive-warning-100: #FCDFC0;
  --primitive-warning-500: #E8922B;
  --primitive-warning-700: #B86B14;

  /* Error */
  --primitive-error-50: #FBEAE5;
  --primitive-error-100: #F5CBC0;
  --primitive-error-500: #C75B39;
  --primitive-error-700: #9D4127;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  /* Font Families */
  --primitive-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --primitive-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --primitive-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --primitive-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes — Modular Scale (1.25 ratio) */
  --primitive-text-xs: 0.75rem;     /* 12px */
  --primitive-text-sm: 0.875rem;    /* 14px */
  --primitive-text-base: 1rem;      /* 16px */
  --primitive-text-md: 1.125rem;    /* 18px */
  --primitive-text-lg: 1.25rem;     /* 20px */
  --primitive-text-xl: 1.5rem;      /* 24px */
  --primitive-text-2xl: 1.875rem;   /* 30px */
  --primitive-text-3xl: 2.25rem;    /* 36px */
  --primitive-text-4xl: 3rem;       /* 48px */
  --primitive-text-5xl: 3.75rem;    /* 60px */
  --primitive-text-6xl: 4.5rem;     /* 72px */

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

  /* Line Heights */
  --primitive-leading-none: 1;
  --primitive-leading-tight: 1.1;
  --primitive-leading-snug: 1.25;
  --primitive-leading-normal: 1.5;
  --primitive-leading-relaxed: 1.625;
  --primitive-leading-loose: 1.8;

  /* Letter Spacing */
  --primitive-tracking-tight: -0.025em;
  --primitive-tracking-normal: 0;
  --primitive-tracking-wide: 0.025em;
  --primitive-tracking-wider: 0.05em;
  --primitive-tracking-caps: 0.1em;

  /* ─────────────────────────────────────────────────────────────────────────
     SPACING PRIMITIVES — 4px base unit
     ───────────────────────────────────────────────────────────────────────── */

  --primitive-space-0: 0;
  --primitive-space-px: 1px;
  --primitive-space-1: 0.25rem;     /* 4px */
  --primitive-space-2: 0.5rem;      /* 8px */
  --primitive-space-3: 0.75rem;     /* 12px */
  --primitive-space-4: 1rem;        /* 16px */
  --primitive-space-5: 1.25rem;     /* 20px */
  --primitive-space-6: 1.5rem;      /* 24px */
  --primitive-space-8: 2rem;        /* 32px */
  --primitive-space-10: 2.5rem;     /* 40px */
  --primitive-space-12: 3rem;       /* 48px */
  --primitive-space-16: 4rem;       /* 64px */
  --primitive-space-20: 5rem;       /* 80px */
  --primitive-space-24: 6rem;       /* 96px */
  --primitive-space-32: 8rem;       /* 128px */
  --primitive-space-40: 10rem;      /* 160px */
  --primitive-space-48: 12rem;      /* 192px */

  /* ─────────────────────────────────────────────────────────────────────────
     BORDER & RADIUS PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  --primitive-border-1: 1px;
  --primitive-border-2: 2px;
  --primitive-border-3: 3px;
  --primitive-border-4: 4px;

  --primitive-radius-none: 0;
  --primitive-radius-sm: 2px;
  --primitive-radius-md: 4px;
  --primitive-radius-lg: 8px;
  --primitive-radius-xl: 12px;
  --primitive-radius-2xl: 16px;
  --primitive-radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────────────────
     SHADOW PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  --primitive-shadow-xs: 0 1px 2px 0 rgba(30, 58, 95, 0.05);
  --primitive-shadow-sm: 0 1px 3px 0 rgba(30, 58, 95, 0.1), 0 1px 2px -1px rgba(30, 58, 95, 0.1);
  --primitive-shadow-md: 0 4px 6px -1px rgba(30, 58, 95, 0.1), 0 2px 4px -2px rgba(30, 58, 95, 0.1);
  --primitive-shadow-lg: 0 10px 15px -3px rgba(30, 58, 95, 0.1), 0 4px 6px -4px rgba(30, 58, 95, 0.1);
  --primitive-shadow-xl: 0 20px 25px -5px rgba(30, 58, 95, 0.1), 0 8px 10px -6px rgba(30, 58, 95, 0.1);
  --primitive-shadow-2xl: 0 25px 50px -12px rgba(30, 58, 95, 0.25);
  --primitive-shadow-inner: inset 0 2px 4px 0 rgba(30, 58, 95, 0.06);

  /* Gold-tinted shadows for premium/accent elements */
  --primitive-shadow-gold-sm: 0 2px 8px -2px rgba(212, 168, 75, 0.3);
  --primitive-shadow-gold-md: 0 4px 12px -2px rgba(212, 168, 75, 0.25);
  --primitive-shadow-gold-lg: 0 8px 24px -4px rgba(212, 168, 75, 0.3);

  /* ─────────────────────────────────────────────────────────────────────────
     ANIMATION PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  --primitive-duration-75: 75ms;
  --primitive-duration-100: 100ms;
  --primitive-duration-150: 150ms;
  --primitive-duration-200: 200ms;
  --primitive-duration-300: 300ms;
  --primitive-duration-500: 500ms;
  --primitive-duration-700: 700ms;
  --primitive-duration-1000: 1000ms;

  --primitive-ease-linear: linear;
  --primitive-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --primitive-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --primitive-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --primitive-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ─────────────────────────────────────────────────────────────────────────
     Z-INDEX PRIMITIVES
     ───────────────────────────────────────────────────────────────────────── */

  --primitive-z-below: -1;
  --primitive-z-base: 0;
  --primitive-z-raised: 1;
  --primitive-z-dropdown: 100;
  --primitive-z-sticky: 200;
  --primitive-z-overlay: 300;
  --primitive-z-modal: 400;
  --primitive-z-toast: 500;
  --primitive-z-tooltip: 600;
}


/* =============================================================================
   SEMANTIC TOKENS — Use these in components
   ============================================================================= */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     BRAND COLORS
     ───────────────────────────────────────────────────────────────────────── */

  /* Executive Navy — Primary brand, trust & authority */
  --color-navy: var(--primitive-navy-900);
  --color-navy-light: var(--primitive-navy-700);
  --color-navy-dark: var(--primitive-navy-950);
  --color-navy-muted: var(--primitive-navy-400);

  /* Leadership Gold — Accent, CTAs, premium highlights */
  --color-gold: var(--primitive-gold-500);
  --color-gold-light: var(--primitive-gold-300);
  --color-gold-dark: var(--primitive-gold-700);
  --color-gold-muted: var(--primitive-gold-200);

  /* Teal — Links, secondary interactions */
  --color-teal: var(--primitive-teal-500);
  --color-teal-light: var(--primitive-teal-300);
  --color-teal-dark: var(--primitive-teal-700);

  /* Clinical Light — Healthcare-context backgrounds */
  --color-clinical: var(--primitive-clinical-200);
  --color-clinical-light: var(--primitive-clinical-100);
  --color-clinical-dark: var(--primitive-clinical-400);

  /* Warm Cream — Alternative backgrounds */
  --color-cream: var(--primitive-cream-200);
  --color-cream-light: var(--primitive-cream-100);

  /* ─────────────────────────────────────────────────────────────────────────
     SURFACE COLORS
     ───────────────────────────────────────────────────────────────────────── */

  --color-surface-page: var(--primitive-neutral-0);
  --color-surface-raised: var(--primitive-neutral-0);
  --color-surface-sunken: var(--primitive-neutral-50);
  --color-surface-clinical: var(--primitive-clinical-200);
  --color-surface-cream: var(--primitive-cream-200);
  --color-surface-navy: var(--primitive-navy-900);
  --color-surface-overlay: rgba(30, 58, 95, 0.85);

  /* ─────────────────────────────────────────────────────────────────────────
     TEXT COLORS
     ───────────────────────────────────────────────────────────────────────── */

  --color-text-primary: var(--primitive-neutral-800);
  --color-text-secondary: var(--primitive-neutral-600);
  --color-text-tertiary: var(--primitive-neutral-500);
  --color-text-muted: var(--primitive-neutral-400);
  --color-text-inverse: var(--primitive-neutral-0);
  --color-text-navy: var(--primitive-navy-900);
  --color-text-gold: var(--primitive-gold-600);
  --color-text-link: var(--primitive-teal-500);
  --color-text-link-hover: var(--primitive-navy-900);

  /* ─────────────────────────────────────────────────────────────────────────
     BORDER COLORS
     ───────────────────────────────────────────────────────────────────────── */

  --color-border-default: var(--primitive-neutral-200);
  --color-border-muted: var(--primitive-neutral-100);
  --color-border-strong: var(--primitive-neutral-300);
  --color-border-focus: var(--primitive-teal-500);
  --color-border-navy: var(--primitive-navy-900);
  --color-border-gold: var(--primitive-gold-500);
  --color-border-inverse: var(--primitive-neutral-0);

  /* ─────────────────────────────────────────────────────────────────────────
     STATE COLORS
     ───────────────────────────────────────────────────────────────────────── */

  --color-success: var(--primitive-success-500);
  --color-success-bg: var(--primitive-success-50);
  --color-success-border: var(--primitive-success-100);

  --color-warning: var(--primitive-warning-500);
  --color-warning-bg: var(--primitive-warning-50);
  --color-warning-border: var(--primitive-warning-100);

  --color-error: var(--primitive-error-500);
  --color-error-bg: var(--primitive-error-50);
  --color-error-border: var(--primitive-error-100);

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ───────────────────────────────────────────────────────────────────────── */

  /* Font Families */
  --font-heading: var(--primitive-font-display);
  --font-subheading: var(--primitive-font-serif);
  --font-body: var(--primitive-font-body);
  --font-ui: var(--primitive-font-body);
  --font-mono: var(--primitive-font-mono);

  /* Heading Styles */
  --heading-hero-size: var(--primitive-text-5xl);
  --heading-hero-weight: var(--primitive-weight-extrabold);
  --heading-hero-leading: var(--primitive-leading-tight);
  --heading-hero-tracking: var(--primitive-tracking-tight);

  --heading-1-size: var(--primitive-text-4xl);
  --heading-1-weight: var(--primitive-weight-extrabold);
  --heading-1-leading: var(--primitive-leading-tight);

  --heading-2-size: var(--primitive-text-3xl);
  --heading-2-weight: var(--primitive-weight-bold);
  --heading-2-leading: var(--primitive-leading-snug);

  --heading-3-size: var(--primitive-text-xl);
  --heading-3-weight: var(--primitive-weight-semibold);
  --heading-3-leading: var(--primitive-leading-snug);

  --heading-4-size: var(--primitive-text-lg);
  --heading-4-weight: var(--primitive-weight-semibold);
  --heading-4-leading: var(--primitive-leading-normal);

  /* Body Styles */
  --body-lg-size: var(--primitive-text-md);
  --body-lg-leading: var(--primitive-leading-relaxed);

  --body-base-size: var(--primitive-text-base);
  --body-base-leading: var(--primitive-leading-relaxed);

  --body-sm-size: var(--primitive-text-sm);
  --body-sm-leading: var(--primitive-leading-normal);

  --body-xs-size: var(--primitive-text-xs);
  --body-xs-leading: var(--primitive-leading-normal);

  /* ─────────────────────────────────────────────────────────────────────────
     SPACING TOKENS
     ───────────────────────────────────────────────────────────────────────── */

  --space-xs: var(--primitive-space-1);      /* 4px */
  --space-sm: var(--primitive-space-2);      /* 8px */
  --space-md: var(--primitive-space-4);      /* 16px */
  --space-lg: var(--primitive-space-6);      /* 24px */
  --space-xl: var(--primitive-space-8);      /* 32px */
  --space-2xl: var(--primitive-space-12);    /* 48px */
  --space-3xl: var(--primitive-space-16);    /* 64px */
  --space-4xl: var(--primitive-space-24);    /* 96px */

  /* Section Spacing */
  --section-padding-y: var(--primitive-space-20);
  --section-padding-y-sm: var(--primitive-space-12);
  --section-gap: var(--primitive-space-16);

  /* Container */
  --container-max: 1280px;
  --container-narrow: 960px;
  --container-content: 720px;
  --container-padding: var(--primitive-space-6);
  --container-padding-sm: var(--primitive-space-4);

  /* ─────────────────────────────────────────────────────────────────────────
     COMPONENT TOKENS
     ───────────────────────────────────────────────────────────────────────── */

  /* Buttons */
  --button-radius: var(--primitive-radius-md);
  --button-font-weight: var(--primitive-weight-semibold);
  --button-font-family: var(--primitive-font-display);
  --button-transition: all var(--primitive-duration-200) var(--primitive-ease-out);

  --button-padding-sm: var(--primitive-space-2) var(--primitive-space-4);
  --button-padding-md: var(--primitive-space-3) var(--primitive-space-6);
  --button-padding-lg: var(--primitive-space-4) var(--primitive-space-8);

  /* Cards */
  --card-radius: var(--primitive-radius-lg);
  --card-shadow: var(--primitive-shadow-md);
  --card-shadow-hover: var(--primitive-shadow-lg);
  --card-padding: var(--primitive-space-6);
  --card-padding-lg: var(--primitive-space-8);

  /* Inputs */
  --input-radius: var(--primitive-radius-md);
  --input-border-width: var(--primitive-border-2);
  --input-padding: var(--primitive-space-3) var(--primitive-space-4);
  --input-focus-ring: 0 0 0 3px rgba(45, 95, 138, 0.15);

  /* Navigation */
  --nav-height: 80px;
  --nav-height-mobile: 64px;

  /* Gold Accent Line (signature brand element) */
  --gold-line-width: 60px;
  --gold-line-width-wide: 100%;
  --gold-line-height: 3px;

  /* ─────────────────────────────────────────────────────────────────────────
     ANIMATION TOKENS
     ───────────────────────────────────────────────────────────────────────── */

  --transition-fast: var(--primitive-duration-150) var(--primitive-ease-out);
  --transition-base: var(--primitive-duration-200) var(--primitive-ease-out);
  --transition-slow: var(--primitive-duration-300) var(--primitive-ease-out);
  --transition-smooth: var(--primitive-duration-500) var(--primitive-ease-smooth);

  /* ─────────────────────────────────────────────────────────────────────────
     Z-INDEX TOKENS
     ───────────────────────────────────────────────────────────────────────── */

  --z-base: var(--primitive-z-base);
  --z-raised: var(--primitive-z-raised);
  --z-dropdown: var(--primitive-z-dropdown);
  --z-sticky: var(--primitive-z-sticky);
  --z-overlay: var(--primitive-z-overlay);
  --z-modal: var(--primitive-z-modal);
  --z-toast: var(--primitive-z-toast);
  --z-tooltip: var(--primitive-z-tooltip);
}


/* =============================================================================
   RESPONSIVE OVERRIDES
   ============================================================================= */

@media (max-width: 768px) {
  :root {
    /* Scale down headings on mobile */
    --heading-hero-size: var(--primitive-text-4xl);
    --heading-1-size: var(--primitive-text-3xl);
    --heading-2-size: var(--primitive-text-2xl);
    --heading-3-size: var(--primitive-text-lg);

    /* Reduce section spacing */
    --section-padding-y: var(--primitive-space-12);
    --section-gap: var(--primitive-space-10);

    /* Smaller container padding */
    --container-padding: var(--primitive-space-4);
  }
}

@media (max-width: 480px) {
  :root {
    --heading-hero-size: var(--primitive-text-3xl);
    --heading-1-size: var(--primitive-text-2xl);
    --heading-2-size: var(--primitive-text-xl);

    --section-padding-y: var(--primitive-space-10);
    --container-padding: var(--primitive-space-3);
  }
}