/* Trainly Design System — Token File */
/* All design tokens for the Trainly UI. Import this file FIRST. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ── Fonts ── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Color Palette ── */
  --clr-violet-50:  #f5f3ff;
  --clr-violet-100: #ede9fe;
  --clr-violet-200: #ddd6fe;
  --clr-violet-300: #c4b5fd;
  --clr-violet-400: #a78bfa;
  --clr-violet-500: #8b5cf6;
  --clr-violet-600: #7c3aed;
  --clr-violet-700: #6d28d9;
  --clr-violet-800: #5b21b6;
  --clr-violet-900: #4c1d95;

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

  --clr-green-50:  #f0fdf4;
  --clr-green-100: #dcfce7;
  --clr-green-500: #22c55e;
  --clr-green-600: #16a34a;
  --clr-green-700: #15803d;
  --clr-green-900: #14532d;

  --clr-yellow-50:  #fefce8;
  --clr-yellow-100: #fef9c3;
  --clr-yellow-400: #facc15;
  --clr-yellow-500: #eab308;
  --clr-yellow-600: #ca8a04;
  --clr-yellow-900: #713f12;

  --clr-red-50:  #fef2f2;
  --clr-red-100: #fee2e2;
  --clr-red-500: #ef4444;
  --clr-red-600: #dc2626;
  --clr-red-700: #b91c1c;
  --clr-red-900: #7f1d1d;

  --clr-cyan-50:  #ecfeff;
  --clr-cyan-100: #cffafe;
  --clr-cyan-500: #06b6d4;
  --clr-cyan-600: #0891b2;
  --clr-cyan-900: #164e63;

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

  /* ── Semantic Surfaces ── */
  --surface-page:    var(--clr-slate-100);
  --surface-card:    var(--clr-white);
  --surface-raised:  var(--clr-white);
  --surface-overlay: var(--clr-white);
  --surface-input:   var(--clr-white);
  --surface-subtle:  var(--clr-slate-50);
  --surface-muted:   var(--clr-slate-100);

  /* ── Semantic Text ── */
  --text-primary:   var(--clr-slate-900);
  --text-secondary: var(--clr-slate-600);
  --text-muted:     var(--clr-slate-400);
  --text-inverse:   var(--clr-white);
  --text-link:      var(--clr-violet-600);
  --text-on-brand:  var(--clr-white);

  /* ── Semantic Brand ── */
  --brand-primary:       var(--clr-violet-600);
  --brand-primary-dark:  var(--clr-violet-700);
  --brand-primary-light: var(--clr-violet-100);
  --brand-success:       var(--clr-green-600);
  --brand-warning:       var(--clr-yellow-500);
  --brand-danger:        var(--clr-red-500);
  --brand-info:          var(--clr-cyan-500);

  /* ── Semantic Border ── */
  --border-default: var(--clr-slate-200);
  --border-subtle:  var(--clr-slate-100);
  --border-strong:  var(--clr-slate-300);
  --border-brand:   var(--clr-violet-600);
  --border-focus:   var(--clr-violet-400);

  /* ── Radii ── */
  --radius-xs:   0.25rem;   /* 4px  */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.625rem;  /* 10px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-pill: 50rem;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-focus: 0 0 0 3px rgba(124,58,237,0.15);
  --clr-white-85: rgba(255,255,255,0.85);
  --clr-white-15: rgba(255,255,255,0.15);

  /* ── 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-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Layout ── */
  --navbar-height: 60px;
  --content-padding-x: var(--space-4);
  --content-padding-y: var(--space-4);

  /* ── Font Sizes ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ── Font Weights ── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-metric:   600;

  /* ── Transitions ── */
  --ease-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Layers ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-backdrop: 1040;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-toast:    1080;

  /* ── Modern Trainly UI Alias Tokens ── */
  --purple:       #6C3FC5;
  --purple-light: #EDE8F8;
  --purple-dark:  #4E2D96;
  --accent:       #F59E0B;
  --radius:       14px;
  --shadow:       0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
}

/* ── Body Reset ── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── RTL Font ── */
[dir="rtl"] body {
  font-family: 'Tajawal', var(--font-sans);
}

/* ── Dark Mode Token Overrides ── */
[data-theme="dark"] {
  --surface-page:    #0f172a;
  --surface-card:    #1e293b;
  --surface-raised:  #243247;
  --surface-overlay: #1e293b;
  --surface-input:   #162032;
  --surface-subtle:  #1a2535;
  --surface-muted:   #1e293b;

  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #0f172a;
  --text-link:      #a78bfa;

  --border-default: #334155;
  --border-subtle:  #293548;
  --border-strong:  #475569;
  --border-focus:   #a78bfa;

  --brand-primary-light: rgba(124, 58, 237, 0.2);
}