/*==================================================
  TutorMatch Design System v2.0
  File        : variables.css
  Description : Global Design Tokens
  Author      : TutorMatch
==================================================*/

:root {

/*==================================================
  1. BRAND COLORS
==================================================*/

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #DBEAFE;
  --color-primary-soft: #EFF6FF;
  --color-primary-gradient: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);


/*==================================================
  2. NEUTRAL COLORS
==================================================*/

  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-card: #FFFFFF;

  --color-border: #E5E7EB;
  --color-border-light: #F1F5F9;
  --color-divider: #E2E8F0;

  --color-overlay-light: rgba(255, 255, 255, 0.70);
  --color-overlay-dark: rgba(15, 23, 42, 0.50);

/*==================================================
  BACKGROUND COLORS
==================================================*/

--color-bg:#F8FAFC;

--color-bg-alt:#FFFFFF;

--color-surface-hover:#F8FAFC;  

/*==================================================
  3. TEXT COLORS
==================================================*/

  --text-heading: #0F172A;
  --text-body: #334155;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-placeholder: #94A3B8;
  --text-disabled: #CBD5E1;
  --text-inverse: #FFFFFF;

/*==================================================
  TEXT COLORS
==================================================*/

--color-heading:#0F172A;

--color-text:#475569;

--color-muted:#64748B;

/*==================================================
  1B. TEXT COLORS (Component Layer)
==================================================*/
--color-text-primary: #0F172A;
--color-text-secondary: #64748B;
--color-primary-dark: #1D4ED8;

/*==================================================
  4. SEMANTIC COLORS
==================================================*/

  /* Success */
  --color-success: #22C55E;
  --color-success-light: #DCFCE7;

  /* Warning */
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;

  /* Error */
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;

  /* Information */
  --color-info: #0EA5E9;
  --color-info-light: #E0F2FE;


/*==================================================
  5. STATE COLORS
==================================================*/

  /* Focus */
  --color-focus-ring: rgba(37, 99, 235, 0.20);

  /* Hover Background */
  --color-hover: #F1F5F9;

  /* Active */
  --color-active: #DBEAFE;

  /* Selected */
  --color-selected: #EFF6FF;

/*==================================================
  6. FONT FAMILIES
==================================================*/

  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;


/*==================================================
  7. FONT SIZES
==================================================*/

  --font-size-display: 4rem;      /* 64px */
  --font-size-h1: 3rem;           /* 48px */
  --font-size-h2: 2.5rem;         /* 40px */
  --font-size-h3: 2rem;           /* 32px */
  --font-size-h4: 1.75rem;        /* 28px */
  --font-size-h5: 1.5rem;         /* 24px */

  --font-size-subtitle: 1.25rem;  /* 20px */
  --font-size-body-lg: 1.125rem;  /* 18px */
  --font-size-body: 1rem;         /* 16px */
  --font-size-small: 0.875rem;    /* 14px */
  --font-size-caption: 0.75rem;   /* 12px */


/*==================================================
  8. FONT WEIGHTS
==================================================*/

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


/*==================================================
  9. LINE HEIGHTS
==================================================*/

  --line-height-heading: 1.2;
  --line-height-body: 1.7;
  --line-height-compact: 1.4;


/*==================================================
  10. BORDER RADIUS
==================================================*/

  --radius-xs:10px;

--radius-sm:14px;

--radius-md:18px;

--radius-lg:24px;

--radius-xl:32px;

--radius-pill:999px;


/*==================================================
  BORDER
==================================================*/

--color-border:#E2E8F0;

--color-border-hover:#CBD5E1;


/*==================================================
  11. SPACING SCALE
==================================================*/

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;


/*==================================================
  12. SHADOWS
==================================================*/

  --shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.04);
  
  --shadow-sm:0 6px 18px rgba(15,23,42,.04);

  --shadow-md:0 10px 30px rgba(15,23,42,.06);

  --shadow-lg:0 18px 45px rgba(15,23,42,.10);

  --shadow-xl:0 28px 60px rgba(15,23,42,.14);

  --shadow-primary: 0 10px 30px rgba(37, 99, 235, 0.20);

/*==================================================
  SPACING
==================================================*/

--section-space:96px;

--section-space-small:72px;

--grid-gap:32px;

--card-padding:28px;

--inside-gap:18px;

/*==================================================
  FONT SIZE
==================================================*/

--fs-hero:56px;

--fs-h2:42px;

--fs-h3:22px;

--fs-body:16px;

--fs-small:14px;

/*==================================================
  13. TRANSITIONS
==================================================*/

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  --transition-bounce: 300ms cubic-bezier(.34,1.56,.64,1);

  --transition-smooth: all 250ms ease;

/*==================================================
  ANIMATION
==================================================*/

--transition:.35s ease;

/*==================================================
  14. Z-INDEX
==================================================*/

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-navbar: 1000;
  --z-overlay: 1100;
  --z-sidebar: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;


/*==================================================
  15. LAYOUT VARIABLES
==================================================*/

  --container-width: 1280px;
  --container-padding: 20px;

  --section-spacing: 96px;

  --navbar-height: 80px;

  --footer-padding: 64px;

  --sidebar-width: 280px;


/*==================================================
  16. COMPONENT VARIABLES
==================================================*/

  /* Buttons */
  --button-height: 56px;
  --button-padding-x: 24px;
  --button-radius: var(--radius-md);

  /* Inputs */
  --input-height: 56px;
  --input-radius: var(--radius-md);

  /* Cards */
  --card-padding: 32px;
  --card-radius: var(--radius-xl);

  /* Avatar */
  --avatar-sm: 40px;
  --avatar-md: 56px;
  --avatar-lg: 72px;
  --avatar-xl: 96px;

  /* Badge */
  --badge-height: 32px;
  --badge-radius: var(--radius-full);

  /* Search */
  --search-height: 60px;

  /* Hero */
  --hero-min-height: 720px;

}
/* 1. Brand Colors */
/* 2. Neutral Colors */
/* 3. Text Colors */
/* 4. Semantic Colors */
/* 5. State Colors */
/* 6. Font Families */
/* 7. Font Sizes */
/* 8. Font Weights */
/* 9. Line Heights */
/* 10. Border Radius */
/* 11. Spacing */
/* 12. Shadows */
/* 13. Transitions */
/* 14. Z-Index */
/* 15. Layout */
/* 16. Component Variables */

/*=========================================
  17. RESPONSIVE DESIGN TOKENS
=========================================*/

@media (max-width: 1024px) {

  :root{

    --container-padding:20px;

    --section-spacing:80px;

    --hero-min-height:650px;

  }

}

@media (min-width: 1025px) {

  :root {

    --container-padding: 20px;

    --section-spacing: 80px;

    --hero-min-height: 650px;

  }

}

@media (max-width:768px){

  :root{

    --font-size-display:3rem;

    --font-size-h1:2.5rem;

    --font-size-h2:2rem;

    --font-size-h3:1.75rem;

    --container-padding:20px;

    --section-spacing:72px;

    --hero-min-height:600px;

  }

}

@media (max-width:480px){

  :root{

    --font-size-display:2.5rem;

    --font-size-h1:2rem;

    --font-size-h2:1.75rem;

    --font-size-h3:1.5rem;

    --font-size-body-lg:1rem;

    --container-padding:16px;

    --section-spacing:56px;

    --hero-min-height:auto;

  }

}