/* ============================================================
   MATSPELL — BASE DESIGN TOKENS
   Source: Lovable theme (matspell-studio-main/src/styles.css)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ── BRAND COLOURS ── Matrix Academy */
  --color-primary:        #1A5C38;
  --color-primary-hover:  #154D2F;
  --color-primary-light:  #EDFAF3;
  --color-primary-dark:   #0F3D24;
  --color-accent:         #E8441E;
  --color-accent-hover:   #CC3A18;
  --color-accent-light:   #FEF0EC;

  /* ── BACKGROUNDS ── */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F8FAFC;
  --color-bg-muted:       #F1F5F9;

  /* ── BORDERS ── */
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* ── TEXT ── */
  --color-text:           #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* ── STATUS SIGNALS — never use for brand ── */
  --color-red:            #EF4444;
  --color-red-bg:         #FEF2F2;
  --color-red-border:     #FECACA;
  --color-red-light:      #FEF2F2;   /* alias for legacy code */

  --color-orange:         #F97316;
  --color-orange-bg:      #FFF7ED;
  --color-orange-border:  #FED7AA;
  --color-orange-light:   #FFF7ED;

  --color-yellow:         #EAB308;
  --color-yellow-bg:      #FEFCE8;
  --color-yellow-border:  #FEF08A;
  --color-yellow-light:   #FEFCE8;

  --color-green:          #22C55E;
  --color-green-bg:       #F0FDF4;
  --color-green-border:   #BBF7D0;
  --color-green-light:    #F0FDF4;

  --color-blue:           #3B82F6;
  --color-blue-bg:        #EFF6FF;
  --color-blue-border:    #BFDBFE;
  --color-blue-light:     #EFF6FF;

  --color-grey:           #94A3B8;
  --color-grey-bg:        #F8FAFC;
  --color-grey-border:    #E2E8F0;
  --color-grey-light:     #F8FAFC;

  --color-purple:         #8B5CF6;
  --color-purple-bg:      #F5F3FF;

  /* ── TYPOGRAPHY ── */
  --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family:          var(--font-sans);  /* alias for legacy code */

  --text-xs:              0.6875rem;   /* 11px */
  --text-sm:              0.8125rem;   /* 13px */
  --text-base:            0.9375rem;   /* 15px */
  --text-md:              1.0625rem;   /* 17px */
  --text-lg:              1.1875rem;   /* 19px */
  --text-xl:              1.375rem;    /* 22px */
  --text-2xl:             1.75rem;     /* 28px */

  /* Legacy aliases — keep so existing templates don't break */
  --font-size-xs:         var(--text-xs);
  --font-size-sm:         var(--text-sm);
  --font-size-base:       var(--text-base);
  --font-size-lg:         var(--text-lg);
  --font-size-xl:         var(--text-xl);
  --font-size-2xl:        var(--text-2xl);

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:        1.25;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 16px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* ── LAYOUT ── */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;
  --header-height:           56px;
  --bottom-tab-height:       60px;
  --content-max-width:       1200px;

  /* ── Z-INDEX SCALE ── (fixes audit T01 z-index risk) */
  --z-sidebar:   100;
  --z-header:    90;
  --z-dropdown:  200;
  --z-modal:     300;
  --z-overlay:   290;
  --z-toast:     400;
  --z-bottom-tab: 110;
}

.hidden {
  display: none !important;
}