/* ================================================================
   SmartKids Design Tokens — source of truth for all colors
   ================================================================
   Never hardcode these hex values in any view or component CSS.
   Always reference var(--sk-*) in any CSS you write or modify.
   ================================================================ */

:root {
  /* === Primary: Terracotta === */
  --sk-primary:       #D4845A;
  --sk-primary-dark:  #B56940;
  --sk-primary-light: #E8A67E;
  --sk-hero-bg:       #A85E38;

  /* === Secondary: Olive Green (kindergarten accent) === */
  --sk-secondary:       #5B8C5A;
  --sk-secondary-dark:  #4A7349;
  --sk-secondary-light: #7DAE7C;

  /* === Accent: Mediterranean Blue === */
  --sk-accent:       #3B7DD8;
  --sk-accent-dark:  #2E64B5;
  --sk-accent-light: #6BA0E6;

  /* === Backgrounds & Surfaces === */
  --sk-warm-bg:      #FDF6F0;
  --sk-warm-surface: #FFFFFF;

  /* === Semantic === */
  --sk-warning: #E8A838;
  --sk-danger:  #D9534F;
  --sk-success: var(--sk-secondary);

  /* === Tints + dark text variants + sunken surface (additive; consumed by
         new components like the parent mobile home; light values) === */
  --sk-primary-tint:   #FBEDE4;
  --sk-secondary-tint: #EAF1EA;
  --sk-accent-tint:    #E7F0FB;
  --sk-warning-dark:   #B9831F;
  --sk-warning-tint:   #FCF3E0;
  --sk-danger-dark:    #B23E3A;
  --sk-danger-light:   #E98A86;
  --sk-danger-tint:    #FBEAEA;
  --sk-warm-sunken:    #F6ECE3;

  /* === Text (on warm surface) === */
  --sk-text-primary:    #2A2420;
  --sk-text-secondary:  #5A4E46;
  --sk-text-muted:      #8A7E76;
  --sk-text-muted-warm: #A69888;
  --sk-text-inverse:    #FFFFFF;

  /* === Border === */
  --sk-border:       #E8DDD5;
  --sk-border-dark:  #D5C8BC;

  /* === Shadows === */
  --sk-shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --sk-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --sk-shadow-lg:  0 8px 24px rgba(0,0,0,0.10);

  /* === Border Radius === */
  --sk-radius-sm:  8px;
  --sk-radius-md:  10px;
  --sk-radius-lg:  12px;

  /* === Z-index Scale === */
  --sk-z-dropdown:  1000;
  --sk-z-sticky:    1020;
  --sk-z-fixed:     1030;
  --sk-z-modal:     1040;
  --sk-z-popover:   1050;
  --sk-z-tooltip:   1060;
}

/* === Dark Mode Overrides ===
   The live app toggles `body.dark` (see header.php theme JS), so that selector
   must be included or these overrides never fire. [data-bs-theme]/[data-theme]
   are kept for the standalone demos and any future BS theme API usage. */
[data-bs-theme="dark"], [data-theme="dark"], body.dark {
  --sk-primary:       #D4845A;
  --sk-primary-dark:  #C47850;
  --sk-primary-light: #E8A67E;
  --sk-hero-bg:       #B0603C;

  --sk-secondary:       #6DA86C;
  --sk-secondary-dark:  #5B8C5A;
  --sk-secondary-light: #8EC48D;

  --sk-accent:       #5A9BE8;
  --sk-accent-dark:  #3B7DD8;
  --sk-accent-light: #7DB5F0;

  --sk-warm-bg:      #1A1817;
  --sk-warm-surface: #252220;
  --sk-warm-sunken:  #1F1C1A;

  --sk-warning: #E8A838;
  --sk-danger:  #E0605C;

  /* dark tints + dark text variants (mirror of the light additions above) */
  --sk-primary-tint:   #36281F;
  --sk-secondary-tint: #20291F;
  --sk-accent-tint:    #1B2738;
  --sk-warning-dark:   #E8A838;
  --sk-warning-tint:   #322813;
  --sk-danger-dark:    #E0605C;
  --sk-danger-light:   #E98A86;
  --sk-danger-tint:    #321E1D;

  --sk-text-primary:   #E8E0D8;
  --sk-text-secondary: #B8AEA4;
  --sk-text-muted:     #8A7E76;
  --sk-text-inverse:   #1A1817;

  --sk-border:       #3A3530;
  --sk-border-dark:  #4A4440;

  --sk-shadow-sm:  0 1px 4px rgba(0,0,0,0.25);
  --sk-shadow-md:  0 4px 12px rgba(0,0,0,0.30);
  --sk-shadow-lg:  0 8px 24px rgba(0,0,0,0.35);
}

/* ================================================================
   REDESIGN ADDITIONS (additive — safe to extend, used by new flows)
   Typography, spacing, motion, radius aliases, and logical-property
   utilities. None of these override existing rules; utility classes
   are opt-in by class name so existing markup is unaffected.
   ================================================================ */
:root {
  /* Font families — Arabic is a first-class face (Noto Sans Arabic is
     already loaded conditionally in header.php for Arabic sessions). */
  --sk-font-display: 'Nunito', system-ui, sans-serif;
  --sk-font-body:    'Inter', system-ui, sans-serif;
  --sk-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --sk-font-arabic:  'Noto Sans Arabic', 'Cairo', sans-serif;

  /* 6-stop type scale */
  --sk-fs-display: 30px;
  --sk-fs-h1:      24px;
  --sk-fs-h2:      20px;
  --sk-fs-h3:      17px;
  --sk-fs-body:    15px;
  --sk-fs-sm:      13px;
  --sk-fs-xs:      12px;

  /* Weights */
  --sk-fw-regular:  400;
  --sk-fw-medium:   500;
  --sk-fw-semibold: 600;
  --sk-fw-bold:     700;
  --sk-fw-extra:    800;

  /* Line-heights */
  --sk-lh-tight:  1.18;
  --sk-lh-snug:   1.35;
  --sk-lh-normal: 1.55;
  --sk-lh-arabic: 1.7;

  /* Spacing — 4px base, 8 steps */
  --sk-sp-2xs: 2px;
  --sk-sp-xs:  4px;
  --sk-sp-sm:  8px;
  --sk-sp-md:  12px;
  --sk-sp-lg:  16px;
  --sk-sp-xl:  24px;
  --sk-sp-2xl: 32px;
  --sk-sp-3xl: 48px;

  /* Radius aliases (semantic names atop the existing sm/md/lg) */
  --sk-radius-card:   14px;
  --sk-radius-button: 10px;
  --sk-radius-pill:   999px;
  --sk-radius-field:  10px;
  --sk-radius-data:   6px;

  /* Motion */
  --sk-motion-fast:   120ms;
  --sk-motion-medium: 240ms;
  --sk-motion-slow:   400ms;
  --sk-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --sk-ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Touch targets */
  --sk-touch-min:    44px;
  --sk-touch-wizard: 48px;
}

/* Arabic typography: when the app sets dir="rtl" lang="ar" (getRTL()),
   give Arabic a bit more lead. Scoped to RTL so LTR is untouched. */
[dir="rtl"] { line-height: var(--sk-lh-arabic); }

/* Mixed-script names (e.g. "Ahmed بن علي") resolve direction per character */
.sk-name  { unicode-bidi: plaintext; }
/* Money / numeric data: tabular figures so columns align */
.sk-money { font-family: var(--sk-font-mono); font-feature-settings: 'tnum' 1, 'lnum' 1; }
[dir="rtl"] .sk-money { font-family: var(--sk-font-arabic); }
.sk-num   { font-variant-numeric: tabular-nums; }

/* ---- Logical-property utilities (opt-in; RTL-safe, no physical L/R) ---- */
.sk-mis-sm { margin-inline-start: var(--sk-sp-sm); }
.sk-mis-md { margin-inline-start: var(--sk-sp-md); }
.sk-mis-lg { margin-inline-start: var(--sk-sp-lg); }
.sk-mie-sm { margin-inline-end: var(--sk-sp-sm); }
.sk-mie-md { margin-inline-end: var(--sk-sp-md); }
.sk-mie-lg { margin-inline-end: var(--sk-sp-lg); }
.sk-pis-md { padding-inline-start: var(--sk-sp-md); }
.sk-pie-md { padding-inline-end: var(--sk-sp-md); }
.sk-text-start { text-align: start; }
.sk-text-end   { text-align: end; }
.sk-bis { border-inline-start: 1px solid var(--sk-border); }
.sk-bie { border-inline-end: 1px solid var(--sk-border); }

/* Directional icons mirror in RTL; symbolic icons must NOT carry this class */
.sk-icon-directional { transform: scaleX(1); }
[dir="rtl"] .sk-icon-directional { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .sk-animated, .sk-animated * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}