/* ============================================================
   DESIGN TOKENS  –  LearnTech Academy Official Brand Identity
   Primary: Deep Royal Blue (#013184)
   Secondary: Vivid Electric Amber Orange (#fd5902)
   ============================================================ */

:root {
  /* ── Official Brand Palette ────────────────────────────── */
  --clr-brand-blue:         #013184;
  --clr-brand-blue-hover:   #00225e;
  --clr-brand-blue-dark:    #001a47;
  --clr-brand-blue-light:   #edf3fc;
  --clr-brand-blue-border:  #cbd7f0;

  --clr-brand-orange:       #fd5902;
  --clr-brand-orange-hover: #df4c00;
  --clr-brand-orange-dark:  #c23e00;
  --clr-brand-orange-light: #fff1ea;
  --clr-brand-orange-border:#fedac2;
  --clr-brand-orange-glow:  rgba(253, 89, 2, 0.35);

  /* ── Academic (Royal Blue Scale) ────────────────────────── */
  --clr-academic-50:  #edf3fc;
  --clr-academic-100: #dce7fc;
  --clr-academic-200: #cbd7f0;
  --clr-academic-300: #9ab3e8;
  --clr-academic-400: #3b71d4;
  --clr-academic-500: #0a48b3;
  --clr-academic-600: #013184;
  --clr-academic-700: #00225e;
  --clr-academic-800: #001a47;
  --clr-academic-900: #00102e;

  /* ── IT / Accent (Vivid Orange Scale) ───────────────────── */
  --clr-it-50:  #fff1ea;
  --clr-it-100: #fedac2;
  --clr-it-200: #fdbb8d;
  --clr-it-300: #ff9c5a;
  --clr-it-400: #ff7728;
  --clr-it-500: #fd5902;
  --clr-it-600: #df4c00;
  --clr-it-700: #c23e00;
  --clr-it-800: #9e3200;
  --clr-it-900: #7a2600;

  --clr-neutral-50:  #f8fafc;
  --clr-neutral-100: #f1f5f9;
  --clr-neutral-200: #e2e8f0;
  --clr-neutral-300: #cbd5e1;
  --clr-neutral-400: #94a3b8;
  --clr-neutral-500: #64748b;
  --clr-neutral-600: #475569;
  --clr-neutral-700: #334155;
  --clr-neutral-800: #1e293b;
  --clr-neutral-900: #0f172a;

  --clr-white: #ffffff;
  --clr-black: #000000;

  --clr-success: #16a34a;
  --clr-warning: #fd5902;
  --clr-error:   #ef4444;

  /* ── Semantic aliases ───────────────────────────────────── */
  --color-primary:          #013184;
  --color-primary-hover:    #00225e;
  --color-primary-light:    #edf3fc;
  --color-primary-border:   #cbd7f0;

  --color-secondary:        #fd5902;
  --color-secondary-hover:  #df4c00;
  --color-secondary-light:  #fff1ea;
  --color-secondary-border: #fedac2;
  --color-secondary-glow:   rgba(253, 89, 2, 0.35);

  --color-accent:           #fd5902;
  --color-accent-hover:     #df4c00;
  --color-accent-light:     #fff1ea;
  --color-accent-border:    #fedac2;
  --color-accent-glow:      rgba(253, 89, 2, 0.35);

  --color-text:           var(--clr-neutral-800);
  --color-text-muted:     var(--clr-neutral-500);
  --color-text-light:     var(--clr-neutral-300);
  --color-text-inverted:  var(--clr-white);

  --color-bg:             var(--clr-white);
  --color-bg-soft:        var(--clr-neutral-50);
  --color-bg-muted:       var(--clr-neutral-100);
  --color-border:         var(--clr-neutral-200);
  --color-border-strong:  var(--clr-neutral-300);

  --color-link:           #013184;
  --color-link-hover:     #fd5902;

  /* ── Brand Gradients ─────────────────────────────────────── */
  --gradient-brand:        linear-gradient(135deg, #013184 0%, #fd5902 100%);
  --gradient-primary:      linear-gradient(135deg, #013184 0%, #00225e 100%);
  --gradient-accent:       linear-gradient(135deg, #fd5902 0%, #ff843d 100%);
  --gradient-hero:         linear-gradient(135deg, #013184 0%, #0a48b3 50%, #fd5902 100%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 Consolas, 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;
  --font-extrabold:800;

  /* ── Spacing scale ──────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Sizing ─────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1),
                0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1),
                0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1),
                0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* ── Transitions ─────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index layers ─────────────────────────────────────── */
  --z-base:   0;
  --z-raised: 10;
  --z-overlay:1010;
  --z-sticky: 1000;
  --z-modal:  1020;
  --z-toast:  1030;
}

/* Dark mode – disabled: site uses a fixed light Google Material theme.
   Re-enable below if dark mode support is added in future. */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-text:     var(--clr-neutral-100);
    --color-text-muted: var(--clr-neutral-400);
    --color-bg:       var(--clr-neutral-900);
    --color-bg-soft:  var(--clr-neutral-800);
    --color-bg-muted: var(--clr-neutral-700);
    --color-border:   var(--clr-neutral-700);
    --color-border-strong: var(--clr-neutral-600);
  }
} */