/* ============================================================
   Doctor Genius — Brand Tokens
   Generated: 2026-02-20
   Source: DG-brand-kit-v3-4-16-24 (pages 5, 6, 8, 10, 12, 15)
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Source+Sans+3:wght@400;600;700&family=Fira+Code:wght@400&display=swap');

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  /* ---- Brand Colours (from PDF) ---- */
  --color-primary: #108FFF;           /* DG Blue — primary actions, headings, links */
  --color-primary-dark: #0A6FCC;      /* Hover/active states (inferred) */
  --color-primary-light: #6BB8FF;     /* Subtle highlights (inferred) */
  --color-primary-50: #E8F4FF;        /* Tint backgrounds (inferred) */

  --color-secondary: #0063B0;         /* DG Dark Blue — secondary UI, nav, data viz */
  --color-secondary-dark: #004D8A;    /* Hover on secondary (inferred) */
  --color-secondary-light: #3389C8;   /* Sidebar accents (inferred) */
  --color-secondary-50: #E6F0F9;      /* Secondary tint bg (inferred) */

  --color-accent: #00CB94;            /* DG Green — CTAs, highlights, success */
  --color-accent-dark: #00A377;       /* Hover on accent (inferred) */
  --color-accent-light: #4DDBB3;      /* Tags, badges (inferred) */
  --color-accent-50: #E6FAF4;         /* Accent tint bg (inferred) */

  /* ---- Neutrals (inferred — cool gray tinted toward brand blue) ---- */
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-black: #000000;

  /* ---- Semantic Colours (inferred) ---- */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-info: #108FFF;              /* Re-uses DG Blue */
  --color-info-light: #E8F4FF;

  /* ---- Surfaces (light mode) ---- */
  --surface-background: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F8FAFC;
  --surface-overlay: rgba(15, 23, 42, 0.5);

  /* ---- Text (light mode) ---- */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: #108FFF;
  --text-link-hover: #0A6FCC;

  /* ---- Borders (light mode) ---- */
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: #108FFF;

  /* ---- Typography ---- */
  --font-heading: 'Roboto Slab', 'Museo Slab', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Agenda', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Code', 'Courier New', Courier, monospace;

  /* ---- Type Scale (inferred — 1.25 modular scale, 16px base) ---- */
  --text-display: 3rem;         /* 48px — hero headlines */
  --text-h1: 2.25rem;           /* 36px — page titles */
  --text-h2: 1.75rem;           /* 28px — section headings */
  --text-h3: 1.375rem;          /* 22px — subsections, card titles */
  --text-h4: 1.125rem;          /* 18px — widget titles */
  --text-body: 1rem;            /* 16px — paragraphs */
  --text-sm: 0.875rem;          /* 14px — table cells, secondary text */
  --text-caption: 0.75rem;      /* 12px — metadata, timestamps */
  --text-overline: 0.6875rem;   /* 11px — uppercase labels */

  --leading-tight: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.08em;    /* Overline / tagline use */

  /* ---- Spacing (inferred — 4px base unit) ---- */
  --space-unit: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---- Border Radius (inferred) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Shadows (inferred) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);

  /* ---- Transitions (inferred) ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- Z-Index Scale (inferred) ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"],
.dark {
  /* Surfaces */
  --surface-background: #0F172A;
  --surface-raised: #1E293B;
  --surface-sunken: #020617;
  --surface-overlay: rgba(0, 0, 0, 0.6);

  /* Text */
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #64748B;
  --text-inverse: #0F172A;
  --text-link: #6BB8FF;
  --text-link-hover: #108FFF;

  /* Borders */
  --border-default: #334155;
  --border-strong: #475569;
  --border-focus: #6BB8FF;

  /* Adjusted brand colours for dark backgrounds */
  --color-primary: #3DA5FF;           /* Slightly lighter blue for dark bg contrast */
  --color-primary-dark: #108FFF;
  --color-primary-light: #0A6FCC;
  --color-primary-50: rgba(16, 143, 255, 0.15);

  --color-secondary: #3389C8;
  --color-secondary-dark: #0063B0;
  --color-secondary-light: #004D8A;
  --color-secondary-50: rgba(0, 99, 176, 0.15);

  --color-accent: #33D4A6;
  --color-accent-dark: #00CB94;
  --color-accent-light: #00A377;
  --color-accent-50: rgba(0, 203, 148, 0.15);

  /* Semantic — brighter on dark */
  --color-success: #34D399;
  --color-success-light: rgba(16, 185, 129, 0.15);
  --color-warning: #FBBF24;
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --color-error: #F87171;
  --color-error-light: rgba(239, 68, 68, 0.15);
  --color-info: #3DA5FF;
  --color-info-light: rgba(16, 143, 255, 0.15);

  /* Shadows — deeper on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   PREFERS-DARK (automatic OS detection)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-background: #0F172A;
    --surface-raised: #1E293B;
    --surface-sunken: #020617;
    --surface-overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;
    --text-inverse: #0F172A;
    --text-link: #6BB8FF;
    --text-link-hover: #108FFF;

    --border-default: #334155;
    --border-strong: #475569;
    --border-focus: #6BB8FF;

    --color-primary: #3DA5FF;
    --color-primary-dark: #108FFF;
    --color-primary-light: #0A6FCC;
    --color-primary-50: rgba(16, 143, 255, 0.15);

    --color-secondary: #3389C8;
    --color-secondary-dark: #0063B0;
    --color-secondary-light: #004D8A;
    --color-secondary-50: rgba(0, 99, 176, 0.15);

    --color-accent: #33D4A6;
    --color-accent-dark: #00CB94;
    --color-accent-light: #00A377;
    --color-accent-50: rgba(0, 203, 148, 0.15);

    --color-success: #34D399;
    --color-success-light: rgba(16, 185, 129, 0.15);
    --color-warning: #FBBF24;
    --color-warning-light: rgba(245, 158, 11, 0.15);
    --color-error: #F87171;
    --color-error-light: rgba(239, 68, 68, 0.15);
    --color-info: #3DA5FF;
    --color-info-light: rgba(16, 143, 255, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
}