/* ============================================================
   Khateeb Kids Clinic — colour tokens (the DEFAULT client)
   Originally generated by scripts/build_tokens.py; hand-maintained now.
   Ramps built in OKLCH; every pairing WCAG-checked.
   assets/js/brand.js overrides the blue/red ramps and every token
   derived from them at runtime when a Brand kit is active — keep new
   brand colour in the ramps or the semantic tokens below, never raw hex.
   ============================================================ */
:root {
  /* ---- primitive ramps ---- */
  --c-blue-50: #F3F8FC;
  --c-blue-100: #E6F0F8;
  --c-blue-200: #CCE0F2;
  --c-blue-300: #ACCDEB;
  --c-blue-400: #86B7E5;
  --c-blue-500: #5C9FDD;
  --c-blue-600: #0C6CB4;
  --c-blue-700: #1467AD;
  --c-blue-800: #0A528F;
  --c-blue-900: #063E70;
  --c-blue-950: #022A51;

  --c-red-50: #FFF5F2;
  --c-red-100: #FDE9E4;
  --c-red-200: #FBD3CA;
  --c-red-300: #F9B6A8;
  --c-red-400: #F69282;
  --c-red-500: #F06A5B;
  --c-red-600: #CC2424;
  --c-red-700: #BA1620;
  --c-red-800: #990218;
  --c-red-900: #790012;
  --c-red-950: #57000A;

  --c-sand-50: #F8F7F6;
  --c-sand-100: #F0EEEB;
  --c-sand-200: #E1DDD7;
  --c-sand-300: #CEC7BE;
  --c-sand-400: #BAB0A1;
  --c-sand-500: #A59884;
  --c-sand-600: #8A7A63;
  --c-sand-700: #71624D;
  --c-sand-800: #5B4E3C;
  --c-sand-900: #463B2C;
  --c-sand-950: #30281D;

  --c-teal-50: #F4F9F7;
  --c-teal-100: #E6F1ED;
  --c-teal-200: #CEE3DC;
  --c-teal-300: #ADD2C7;
  --c-teal-400: #87BFAF;
  --c-teal-500: #5AAC96;
  --c-teal-600: #0E8A72;
  --c-teal-700: #007761;
  --c-teal-800: #00604D;
  --c-teal-900: #004A3A;
  --c-teal-950: #003327;

  --c-amber-50: #FBF7F2;
  --c-amber-100: #F6ECE4;
  --c-amber-200: #ECDAC8;
  --c-amber-300: #E1C2A5;
  --c-amber-400: #D5A87B;
  --c-amber-500: #C88B4B;
  --c-amber-600: #B26B00;
  --c-amber-700: #945200;
  --c-amber-800: #794000;
  --c-amber-900: #5E2F00;
  --c-amber-950: #431F00;

  /* ---- semantic (light) ---- */
  --surface-page: #FFFFFF;
  --surface-sunken: #F8F7F6;
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-brand-soft: #F3F8FC;
  --surface-brand: #0C6CB4;
  --surface-accent-soft: #FFF5F2;
  --surface-inverse: #30281D;
  --text-primary: #30281D;
  --text-secondary: #5B4E3C;
  --text-muted: #71624D;
  --text-on-brand: #FFFFFF;
  --text-on-inverse: #F8F7F6;
  --text-brand: #1467AD;
  --text-link: #1467AD;
  --border-subtle: #E1DDD7;
  --border-default: #CEC7BE;
  --border-strong: #8A7A63;
  --border-brand: #0C6CB4;
  --action-primary: #0C6CB4;
  --action-primary-hover: #1467AD;
  --action-primary-press: #0A528F;
  --action-secondary: #F3F8FC;
  --focus-ring: #1467AD;
  --accent: #CC2424;
  --accent-soft: #FDE9E4;
  --status-success: #007761;
  --status-success-soft: #F4F9F7;
  --status-warning: #945200;
  --status-warning-soft: #FBF7F2;
  --status-error: #990218;
  --status-error-soft: #FFF5F2;
  --status-info: #1467AD;
  --status-info-soft: #F3F8FC;

  /* ---- brand helpers (for rgba() tints and gradients) ---- */
  --brand-rgb: 12, 108, 180;
  --accent-rgb: 204, 36, 36;
  --brand-deep: #0A5C9C;
  --brand-lift: #1573B8;
  --text-on-accent: #FFFFFF;
}

[data-theme="dark"] {
  --surface-page: #30281D;
  --surface-sunken: #0E100C;
  --surface-card: #463B2C;
  --surface-raised: #5B4E3C;
  --surface-brand-soft: #022A51;
  --surface-brand: #5C9FDD;
  --surface-accent-soft: #57000A;
  --surface-inverse: #F8F7F6;
  --text-primary: #F8F7F6;
  --text-secondary: #E1DDD7;
  --text-muted: #CEC7BE;
  --text-on-brand: #30281D;
  --text-on-inverse: #30281D;
  --text-brand: #ACCDEB;
  --text-link: #ACCDEB;
  --border-subtle: #5B4E3C;
  --border-default: #71624D;
  --border-strong: #A59884;
  --border-brand: #86B7E5;
  --action-primary: #86B7E5;
  --action-primary-hover: #ACCDEB;
  --action-primary-press: #CCE0F2;
  --action-secondary: #022A51;
  --focus-ring: #ACCDEB;
  --accent: #F69282;
  --accent-soft: #57000A;
  --status-success: #ADD2C7;
  --status-success-soft: #003327;
  --status-warning: #E1C2A5;
  --status-warning-soft: #431F00;
  --status-error: #F9B6A8;
  --status-error-soft: #57000A;
  --status-info: #ACCDEB;
  --status-info-soft: #022A51;
  --brand-rgb: 92, 159, 221;
  --accent-rgb: 246, 146, 130;
  --brand-deep: #4A8FCF;
  --brand-lift: #6DAAE3;
  --text-on-accent: #30281D;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-page: #30281D;
    --surface-sunken: #0E100C;
    --surface-card: #463B2C;
    --surface-raised: #5B4E3C;
    --surface-brand-soft: #022A51;
    --surface-brand: #5C9FDD;
    --surface-accent-soft: #57000A;
    --surface-inverse: #F8F7F6;
    --text-primary: #F8F7F6;
    --text-secondary: #E1DDD7;
    --text-muted: #CEC7BE;
    --text-on-brand: #30281D;
    --text-on-inverse: #30281D;
    --text-brand: #ACCDEB;
    --text-link: #ACCDEB;
    --border-subtle: #5B4E3C;
    --border-default: #71624D;
    --border-strong: #A59884;
    --border-brand: #86B7E5;
    --action-primary: #86B7E5;
    --action-primary-hover: #ACCDEB;
    --action-primary-press: #CCE0F2;
    --action-secondary: #022A51;
    --focus-ring: #ACCDEB;
    --accent: #F69282;
    --accent-soft: #57000A;
    --status-success: #ADD2C7;
    --status-success-soft: #003327;
    --status-warning: #E1C2A5;
    --status-warning-soft: #431F00;
    --status-error: #F9B6A8;
    --status-error-soft: #57000A;
    --status-info: #ACCDEB;
    --status-info-soft: #022A51;
    --brand-rgb: 92, 159, 221;
    --accent-rgb: 246, 146, 130;
    --brand-deep: #4A8FCF;
    --brand-lift: #6DAAE3;
    --text-on-accent: #30281D;
  }
}