/* Lakshya 360 — bundled design tokens (self-contained for the standalone website).
   Generated from the design system's tokens so this folder works on its own. */

/* Lakshya 360 — Webfonts
   Display: Plus Jakarta Sans (geometric, confident — headings, brand)
   UI/Body: Inter (neutral, legible — interface + reading)
   Mono:    JetBrains Mono (timers, scores, ranks) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* Lakshya 360 — Color tokens
   Derived from the brand mark: deep navy + electric blue + energetic orange,
   on clean cool-white surfaces. Built for an AI-powered competitive-exam app. */
:root {
  /* ---- Brand: Navy (dominant — headers, dark surfaces, primary text) ---- */
  --navy-950: #0B1733;
  --navy-900: #0E1E3F;
  --navy-800: #15264A;
  --navy-700: #1B335E;
  --navy-600: #244277;

  /* ---- Brand: Blue (secondary — actions, links, info, focus) ---- */
  --blue-700: #1E4F9E;
  --blue-600: #2456B0;
  --blue-500: #2E78D6;
  --blue-400: #5798E4;
  --blue-300: #8FBAF0;
  --blue-200: #C2DAF8;
  --blue-100: #DEEAFA;
  --blue-50:  #EFF5FD;

  /* ---- Brand: Orange (accent — energy, CTAs, streaks, gamification) ---- */
  --orange-700: #C2440F;
  --orange-600: #D9531A;
  --orange-500: #F26522;
  --orange-400: #FF7A3D;
  --orange-300: #FFA06E;
  --orange-200: #FFC9A8;
  --orange-100: #FDE3D2;
  --orange-50:  #FFF3EC;

  /* ---- Neutral: cool slate ---- */
  --white:     #FFFFFF;
  --slate-50:  #F6F8FB;
  --slate-100: #EDF1F7;
  --slate-200: #DEE5EF;
  --slate-300: #C7D1E0;
  --slate-400: #9AA7BD;
  --slate-500: #6B7892;
  --slate-600: #4A566D;
  --slate-700: #333D52;
  --slate-800: #1F2738;
  --slate-900: #121828;

  /* ---- Semantic hues ---- */
  --green-600: #178A4C;
  --green-500: #1E9E57;
  --green-100: #E1F4E9;
  --amber-600: #D08A0C;
  --amber-500: #E8A317;
  --amber-100: #FCF1D8;
  --red-600:   #C73E32;
  --red-500:   #DC4A3D;
  --red-100:   #FBE6E3;

  /* ======================================================================
     Semantic aliases — prefer these in components
     ====================================================================== */

  /* Brand roles */
  --brand-navy:    var(--navy-800);
  --brand-blue:    var(--blue-500);
  --brand-accent:  var(--orange-500);

  /* Text */
  --text-strong:  var(--navy-800);   /* headings */
  --text-body:    var(--slate-700);  /* paragraph / default */
  --text-muted:   var(--slate-500);  /* secondary, captions */
  --text-subtle:  var(--slate-400);  /* meta, placeholders */
  --text-inverse: var(--white);
  --text-link:    var(--blue-600);
  --text-accent:  var(--orange-600);

  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-raised:  var(--white);
  --surface-brand:   var(--navy-800);
  --surface-brand-2: var(--navy-900);
  --surface-accent:  var(--orange-500);
  --surface-info:    var(--blue-50);
  --surface-success: var(--green-100);
  --surface-warning: var(--amber-100);
  --surface-danger:  var(--red-100);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-500);
  --border-focus:   var(--blue-500);

  /* Interactive (primary = navy, accent = orange, soft = blue tint) */
  --action-primary:        var(--navy-800);
  --action-primary-hover:  var(--navy-700);
  --action-primary-press:  var(--navy-900);
  --action-accent:         var(--orange-500);
  --action-accent-hover:   var(--orange-600);
  --action-accent-press:   var(--orange-700);
  --action-soft-bg:        var(--blue-50);
  --action-soft-text:      var(--blue-600);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(46,120,214,0.35);
}

/* Lakshya 360 — Typography tokens */
:root {
  /* Families */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Type scale (px) — mobile-app first */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* base body */
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* eyebrows / overlines */

  /* ---- Semantic text roles ---- */
  --font-display-face: var(--font-display);
  --font-body-face:    var(--font-sans);
}

/* Optional helper classes (components may also just use the vars) */
.l360-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.l360-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.l360-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Lakshya 360 — Spacing, radii, shadows, borders, motion */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-2: 1.5px;

  /* Shadows — cool navy-tinted, soft */
  --shadow-xs: 0 1px 2px rgba(20,35,55,0.06);
  --shadow-sm: 0 2px 8px rgba(20,35,55,0.07);
  --shadow-md: 0 8px 24px rgba(20,35,55,0.10);
  --shadow-lg: 0 16px 40px rgba(20,35,55,0.14);
  --shadow-xl: 0 28px 60px rgba(20,35,55,0.18);
  --shadow-brand:  0 10px 24px rgba(36,86,176,0.28);   /* blue lift on primary */
  --shadow-accent: 0 8px 20px rgba(242,101,34,0.30);   /* orange lift on CTA */
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  /* Layout */
  --app-width: 390px;   /* mobile frame design width */
  --tabbar-h:  64px;
  --topbar-h:  56px;
}