/* =====================================================================
   OnlineTyari Pro — Design System (base.css)
   Single source of truth for design tokens. Every other stylesheet in
   this theme (components.css, courses.css, tests.css, dashboard.css,
   responsive.css) MUST consume these variables — never hardcode colors,
   spacing or radii in feature stylesheets.
   ===================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --ot-primary: #5968EE;
  --ot-primary-rgb: 89, 104, 238;
  --ot-primary-hover: #4655D6;
  --ot-secondary: #7752DF;
  --ot-secondary-rgb: 119, 82, 223;
  --ot-dark: #10152B;
  --ot-text: #293047;
  --ot-muted: #737B91;
  --ot-bg: #F6F7FB;
  --ot-white: #FFFFFF;
  --ot-border: #E6E8EF;

  /* ---- Semantic Colors ---- */
  --ot-success: #1EA97C;
  --ot-success-bg: #E7F7F1;
  --ot-warning: #F5A524;
  --ot-warning-bg: #FDF3E1;
  --ot-danger: #E5484D;
  --ot-danger-bg: #FCE9E9;
  --ot-info: #3B82F6;
  --ot-info-bg: #EAF2FE;

  /* ---- Gradient (hero, badges, CTAs) ---- */
  --ot-gradient: linear-gradient(135deg, var(--ot-primary) 0%, var(--ot-secondary) 100%);

  /* ---- Typography ---- */
  --ot-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ot-font-heading: 'Plus Jakarta Sans', var(--ot-font-base);

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

  --ot-fw-regular: 400;
  --ot-fw-medium: 500;
  --ot-fw-semibold: 600;
  --ot-fw-bold: 700;
  --ot-fw-extrabold: 800;

  --ot-lh-tight: 1.2;
  --ot-lh-normal: 1.5;
  --ot-lh-relaxed: 1.7;

  /* ---- Spacing scale (4px base) ---- */
  --ot-space-1: 0.25rem;
  --ot-space-2: 0.5rem;
  --ot-space-3: 0.75rem;
  --ot-space-4: 1rem;
  --ot-space-5: 1.25rem;
  --ot-space-6: 1.5rem;
  --ot-space-8: 2rem;
  --ot-space-10: 2.5rem;
  --ot-space-12: 3rem;
  --ot-space-16: 4rem;
  --ot-space-20: 5rem;
  --ot-space-24: 6rem;

  /* ---- Radius ---- */
  --ot-radius-sm: 6px;
  --ot-radius-md: 10px;
  --ot-radius-lg: 16px;
  --ot-radius-xl: 24px;
  --ot-radius-full: 999px;

  /* ---- Shadows (soft, premium) ---- */
  --ot-shadow-xs: 0 1px 2px rgba(16, 21, 43, 0.04);
  --ot-shadow-sm: 0 2px 8px rgba(16, 21, 43, 0.06);
  --ot-shadow-md: 0 8px 24px rgba(16, 21, 43, 0.08);
  --ot-shadow-lg: 0 16px 40px rgba(16, 21, 43, 0.12);
  --ot-shadow-focus: 0 0 0 3px rgba(var(--ot-primary-rgb), 0.25);

  /* ---- Layout ---- */
  --ot-container-max: 1280px;
  --ot-header-height: 72px;
  --ot-header-height-mobile: 60px;
  --ot-bottom-nav-height: 64px;

  /* ---- Transitions ---- */
  --ot-transition-fast: 150ms ease;
  --ot-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --ot-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index scale ---- */
  --ot-z-header: 100;
  --ot-z-dropdown: 200;
  --ot-z-mobile-nav: 300;
  --ot-z-modal-backdrop: 400;
  --ot-z-modal: 410;
  --ot-z-toast: 500;
}

/* =====================================================================
   Reset + base element styling
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ot-font-base);
  font-size: var(--ot-fs-base);
  line-height: var(--ot-lh-normal);
  color: var(--ot-text);
  background: var(--ot-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ot-font-heading);
  font-weight: var(--ot-fw-bold);
  line-height: var(--ot-lh-tight);
  color: var(--ot-dark);
  margin: 0 0 var(--ot-space-4);
}

h1 { font-size: var(--ot-fs-4xl); }
h2 { font-size: var(--ot-fs-3xl); }
h3 { font-size: var(--ot-fs-2xl); }
h4 { font-size: var(--ot-fs-xl); }

p { margin: 0 0 var(--ot-space-4); color: var(--ot-text); }

a {
  color: var(--ot-primary);
  text-decoration: none;
  transition: color var(--ot-transition-fast);
}
a:hover { color: var(--ot-primary-hover); }

img { max-width: 100%; height: auto; display: block; }

/* ---- Accessible focus states (never remove outline without replacement) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ot-shadow-focus);
  border-radius: var(--ot-radius-sm);
}

/* ---- Skip link (accessibility) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  background: var(--ot-dark);
  color: var(--ot-white);
  padding: var(--ot-space-3) var(--ot-space-5);
  border-radius: 0 0 var(--ot-radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---- Container ---- */
.ot-container {
  width: 100%;
  max-width: var(--ot-container-max);
  margin-inline: auto;
  padding-inline: var(--ot-space-4);
}
@media (min-width: 768px) {
  .ot-container { padding-inline: var(--ot-space-8); }
}

/* ---- Screen-reader only ---- */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}