/* ============================================================
   TALENTLYTICA DESIGN SYSTEM — Colors & Typography
   Source: Prodigy Design System v.2 (Figma)
   ============================================================ */

/* ── Google Fonts (Open Sans + Inter) ── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Inter:wght@300;400;600&display=swap');

/* ── Avenir (brand font, self-hosted) ── */
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir_Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────── COLOR TOKENS ─────────────────── */
:root {

  /* Primary Blue Scale */
  --color-primary-surface:   #E7F5FF;
  --color-primary-soft:      #D6E6FF;
  --color-primary-soft2:     #A4C7FF;
  --color-primary-light:     #03A0F0;
  --color-primary:           #016699;
  --color-primary-dark:      #002E4A;
  --color-primary-darkest:   #001925;

  /* Sidebar gradient pair */
  --color-sidebar-top:       #2F90D7;
  --color-sidebar-bottom:    #0D5183;

  /* Secondary / Orange Scale */
  --color-secondary-surface: #FFE3C5;
  --color-secondary-soft:    #FFD399;
  --color-secondary-light:   #FDA637;
  --color-secondary:         #FD9F28;
  --color-secondary-dark:    #CA6F00;
  --color-secondary-darkest: #854800;

  /* Error / Red Scale */
  --color-error-surface:     #FDF5F3;
  --color-error-soft:        #FFD3D3;
  --color-error-light:       #EF7476;
  --color-error:             #DE350B;
  --color-error-dark:        #B60C14;
  --color-error-darkest:     #650009;

  /* Success / Green Scale */
  --color-success-surface:   #F2F9F7;
  --color-success-soft:      #ACEECA;
  --color-success-light:     #5BDD94;
  --color-success:           #00875A;
  --color-success-dark:      #005035;
  --color-success-darkest:   #003F2A;

  /* Neutral Scale */
  --color-neutral-white:         #FFFFFF;
  --color-neutral-surface:       #F8F9FA;
  --color-neutral-softlight:     #DEE2E6;
  --color-neutral-soft:          #CED4DA;
  --color-neutral:               #ADB5BD;
  --color-neutral-dark:          #868E96;
  --color-neutral-darkgrey:      #495057;
  --color-neutral-verydark:      #343A40;
  --color-neutral-black:         #212529;

  /* ─────────────────── SEMANTIC ALIASES ─────────────────── */
  --color-bg:            var(--color-neutral-surface);
  --color-bg-card:       var(--color-neutral-white);
  --color-border:        var(--color-neutral-soft);
  --color-border-subtle: var(--color-neutral-softlight);

  --color-text-primary:   var(--color-neutral-black);
  --color-text-secondary: var(--color-neutral-darkgrey);
  --color-text-muted:     var(--color-neutral-dark);
  --color-text-disabled:  var(--color-neutral);
  --color-text-inverse:   var(--color-neutral-white);

  --color-focus-ring:    rgba(1, 102, 153, 0.35);

  /* ─────────────────── TYPOGRAPHY TOKENS ─────────────────── */
  --font-sans:    'Open Sans', sans-serif;
  --font-data:    'Inter', sans-serif;
  --font-button:  'Avenir', 'Open Sans', sans-serif;

  /* Size scale */
  --text-xxs:  10px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;  /* caption */
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;  /* heading 1 */
  --text-4xl:  36px;
  --text-5xl:  60px;  /* heading 0 */

  /* Weight */
  --font-regular:   400;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ─────────────────── SPACING / RADIUS / SHADOW ─────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 28px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(13, 21, 26, 0.10);
  --shadow-md:  0 4px 12px rgba(13, 21, 26, 0.12);
  --shadow-lg:  0 8px 24px rgba(13, 21, 26, 0.15);
}

/* ─────────────────── SEMANTIC TYPE STYLES ─────────────────── */
.h0 {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}
.h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}
.h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.body {
  font-family: var(--font-data);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}
.body-sm {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}
.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.text-xs { font-family: var(--font-data); font-size: var(--text-xs); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }