/**
 * EFD Deaf Foundation — Design System Tokens
 * Theme: "Luminous Dignity — Pearl & Sun"
 * The Egyptian Foundation for the Dignity of the Deaf — المؤسسة المصرية لكرامة الصم
 */

:root,
html[data-theme="light"] {
  /* ==========================================================================
     1. Brand Palette (Extracted directly from Logo Medallion)
     ========================================================================== */
  /* Regal Sapphire (Hand motif & authority) */
  --brand-sapphire:        #1A3E99;
  --brand-sapphire-deep:   #0C2158;
  --brand-sapphire-bright: #2854C5;
  --brand-sapphire-tint:   #EEF3FF;

  /* Egyptian Sun Gold (Outer ring, 5 stars, sun swirl) */
  --brand-gold:            #C59B27;
  --brand-gold-bright:     #D4AF37;
  --brand-gold-deep:       #9A7415;
  --brand-gold-tint:       #FDF9EC;

  /* Ruby Crimson (Mutual aid, heart, emergency support) */
  --brand-ruby:            #A61C2E;
  --brand-ruby-bright:     #C8384A;
  --brand-ruby-deep:       #8C1422;
  --brand-ruby-tint:       #FDF2F4;

  /* Semantic State Tokens */
  --color-success:         #1E7A54;
  --color-success-bg:      #ECFDF5;
  --color-warning:         #B5820E;
  --color-danger:          #A61C2E;
  --color-info:            #1A3E99;

  /* ==========================================================================
     2. Light Surfaces (Warm Pearl & Ivory Canvas)
     ========================================================================== */
  --bg-canvas:             #FAFAF7;   /* Warm luminous pearl canvas */
  --bg-subtle:             #F4F0E6;   /* Soft warm sand for alternate sections */
  --bg-sunk:               #EAE3D2;   /* Inset wells & dark accents */
  --surface-card:          #FFFFFF;   /* Crisp white cards floating on pearl */
  --surface-hover:         #FBFBFA;
  --surface-glass:         rgba(250, 250, 247, 0.88);
  --border-soft:           #E7E0CF;   /* Elegant soft hairlines */
  --border-gold:           #D8C079;   /* Prestige card outlines */
  --border-subtle:         #EBE6D8;

  /* Text & Readability (WCAG AAA) */
  --text-strong:           #14213A;   /* Headings — Deep sapphire ink (13.9:1) */
  --text-body:             #2A3550;   /* Body reading text (9.8:1) */
  --text-muted:            #5A6478;   /* Captions & metadata (5.3:1) */
  --text-onbrand:          #FFFFFF;   /* Text on sapphire/ruby fills */
  --text-ongold:           #2A1C00;   /* Text on gold fills (8.1:1) */

  /* Gradients */
  --grad-sapphire:         linear-gradient(135deg, #1A3E99 0%, #0C2158 100%);
  --grad-gold:             linear-gradient(135deg, #D4AF37 0%, #C59B27 50%, #9A7415 100%);
  --grad-hero:             radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #FAFAF7 50%, #F4F0E6 100%);
  --grad-medallion:        linear-gradient(135deg, #D4AF37, #C59B27, #9A7415);

  /* Warm Tinted Shadows */
  --shadow-sm:             0 2px 6px rgba(42, 28, 0, 0.05);
  --shadow-md:             0 8px 24px rgba(26, 44, 90, 0.08);
  --shadow-lg:             0 18px 44px rgba(20, 33, 88, 0.12);
  --shadow-gold:           0 8px 28px rgba(197, 155, 39, 0.24);
  --shadow-glass:          0 10px 30px rgba(26, 44, 90, 0.06);

  /* Typography Scales */
  --font-ar:               'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-en:               'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:          var(--font-ar);
  --font-body:             var(--font-ar);

  --fs-hero:               clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h1:                 clamp(1.75rem, 3.5vw, 2.6rem);
  --fs-h2:                 clamp(1.4rem, 2.5vw, 2.1rem);
  --fs-h3:                 clamp(1.18rem, 1.8vw, 1.5rem);
  --fs-h4:                 clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body-lg:            clamp(1.05rem, 1.2vw, 1.2rem);
  --fs-body:               1rem;
  --fs-small:              0.875rem;
  --fs-xs:                 0.75rem;

  --lh-body-ar:            1.8;
  --lh-body-en:            1.65;
  --lh-heading:            1.25;

  /* Radii */
  --radius-xs:             4px;
  --radius-sm:             8px;
  --radius-md:             14px;
  --radius-lg:             22px;
  --radius-xl:             32px;
  --radius-full:           9999px;

  /* Transitions */
  --ease-smooth:           cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:       0.18s ease;
  --transition-base:       0.3s var(--ease-smooth);
  --transition-slow:       0.5s var(--ease-smooth);

  --container-max:         1380px;
  --header-height:         88px;
}

/* ==========================================================================
   3. Dark Mode — Deep Obsidian Sapphire
   ========================================================================== */
html[data-theme="dark"] {
  --brand-sapphire:        #6C93EE;
  --brand-sapphire-deep:   #2854C5;
  --brand-sapphire-bright: #8FADF3;
  --brand-sapphire-tint:   #192340;

  --brand-gold:            #E7C765;
  --brand-gold-bright:     #F3DA8A;
  --brand-gold-deep:       #C59B27;
  --brand-gold-tint:       #2A2412;

  --brand-ruby:            #E86A78;
  --brand-ruby-bright:     #F28D97;
  --brand-ruby-deep:       #A61C2E;
  --brand-ruby-tint:       #2D151A;

  --bg-canvas:             #0E1220;   /* Deep obsidian-sapphire base */
  --bg-subtle:             #141A2B;
  --bg-sunk:               #0A0E19;
  --surface-card:          #191F33;   /* Lifted card surfaces */
  --surface-hover:         #202842;
  --surface-glass:         rgba(25, 31, 51, 0.85);
  --border-soft:           #29304A;
  --border-gold:           #7A6529;
  --border-subtle:         #1E253C;

  --text-strong:           #F5F3EC;   /* Pearl white headings (15.8:1) */
  --text-body:             #D4DAE8;   /* High-contrast body (11.6:1) */
  --text-muted:            #9AA4BE;   /* Muted captions (6.1:1) */
  --text-onbrand:          #0A0E19;
  --text-ongold:           #2A1C00;

  --grad-sapphire:         linear-gradient(135deg, #2854C5 0%, #0C2158 100%);
  --grad-gold:             linear-gradient(135deg, #F3DA8A 0%, #E7C765 50%, #C59B27 100%);
  --grad-hero:             radial-gradient(120% 120% at 50% 0%, #1A2340 0%, #0E1220 55%, #0A0E19 100%);

  --shadow-sm:             0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md:             0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:             0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold:           0 8px 30px rgba(231, 199, 101, 0.22);
  --shadow-glass:          0 10px 30px rgba(0, 0, 0, 0.45);
}

/* High Contrast Mode Override */
html[data-contrast="high"] {
  --bg-canvas:             #000000;
  --bg-subtle:             #0A0A0A;
  --surface-card:          #121212;
  --border-soft:           #FFFFFF;
  --border-gold:           #FFD700;
  --text-strong:           #FFFFFF;
  --text-body:             #FFFFFF;
  --text-muted:            #EEEEEE;
}