/* ============================================================
   Apex Health · Resilience Series — Design Tokens
   Light + dark themes. Token names match those used by the
   embedded interactive guides so nothing inside needs changing.
   ============================================================ */

:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* Radius */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 20px;

  /* Light theme — neutral, calm, healthcare-appropriate */
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F6F5F2;
  --color-background-tertiary: #EDEBE5;

  --color-text-primary: #1A1A1A;
  --color-text-secondary: #555550;
  --color-text-tertiary: #8A8A85;

  --color-border-primary: #C9C7C0;
  --color-border-secondary: #D8D5CD;
  --color-border-tertiary: #E5E3DD;

  /* Status colours — light */
  --color-background-info:    #E6F1FB;
  --color-border-info:        #B5D4F4;
  --color-text-info:          #0C447C;

  --color-background-success: #EAF3DE;
  --color-border-success:     #C0DD97;
  --color-text-success:       #27500A;

  --color-background-warning: #FAEEDA;
  --color-border-warning:     #F0D4A0;
  --color-text-warning:       #633806;

  --color-background-danger:  #FBEAE5;
  --color-border-danger:      #F4C0B0;
  --color-text-danger:        #8A2A0F;

  /* Brand accent (Apex / AgentX-aligned) */
  --color-accent: #185FA5;
  --color-accent-hover: #0C447C;
  --color-accent-soft: #E6F1FB;
}

[data-theme='dark'] {
  --color-background-primary: #14171A;
  --color-background-secondary: #1C2024;
  --color-background-tertiary: #262A2F;

  --color-text-primary: #E8E6E1;
  --color-text-secondary: #B5B1A8;
  --color-text-tertiary: #888479;

  --color-border-primary: #3A3F45;
  --color-border-secondary: #2F3338;
  --color-border-tertiary: #262A2F;

  --color-background-info:    #0E2A47;
  --color-border-info:        #1F4A7E;
  --color-text-info:          #B5D4F4;

  --color-background-success: #173404;
  --color-border-success:     #2F5C0F;
  --color-text-success:       #C0DD97;

  --color-background-warning: #412402;
  --color-border-warning:     #6E3F08;
  --color-text-warning:       #FAC775;

  --color-background-danger:  #3A1308;
  --color-border-danger:      #6E2615;
  --color-text-danger:        #F4C0B0;

  --color-accent: #5DA3E0;
  --color-accent-hover: #85B7EB;
  --color-accent-soft: #0E2A47;
}

/* Dark theme is opt-in only (via the theme toggle), to avoid mixed contrast
   with embedded guides that include some hardcoded colour values. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='dark-system-disabled-by-default'] {
    --color-background-primary: #14171A;
    --color-background-secondary: #1C2024;
    --color-background-tertiary: #262A2F;

    --color-text-primary: #E8E6E1;
    --color-text-secondary: #B5B1A8;
    --color-text-tertiary: #888479;

    --color-border-primary: #3A3F45;
    --color-border-secondary: #2F3338;
    --color-border-tertiary: #262A2F;

    --color-background-info:    #0E2A47;
    --color-border-info:        #1F4A7E;
    --color-text-info:          #B5D4F4;

    --color-background-success: #173404;
    --color-border-success:     #2F5C0F;
    --color-text-success:       #C0DD97;

    --color-background-warning: #412402;
    --color-border-warning:     #6E3F08;
    --color-text-warning:       #FAC775;

    --color-background-danger:  #3A1308;
    --color-border-danger:      #6E2615;
    --color-text-danger:        #F4C0B0;

    --color-accent: #5DA3E0;
    --color-accent-hover: #85B7EB;
    --color-accent-soft: #0E2A47;
  }
}