/*
 * ithras Design Tokens — single source of truth.
 *
 * Every colour, font, spacing, and radius value used in the product
 * MUST reference these variables. Zero hardcoded hex values in JS files.
 *
 * See also: shared/styles/shared.js (JS mirror for React inline styles)
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --brand-gold:          #E2B53F;
  --brand-gold-muted:    #B8941F;
  --brand-gold-wash:     #FBF5E6;

  /* ── Neutrals (warm stone — NOT cool Tailwind grays) ───────────────────── */
  --ink:                 #1A1A19;
  --ink-secondary:       #52524E;
  --ink-muted:           #8A8A86;
  --ink-faint:           #B5B5B0;

  --surface-page:        #FAFAF8;
  --surface-card:        #FFFFFF;
  --surface-raised:      #F5F5F3;
  --surface-hover:       #F0F0ED;

  --border-default:      #E8E8E4;
  --border-subtle:       #F0F0ED;
  --border-strong:       #D4D4D0;

  /* ── Accent (black IS the accent) ──────────────────────────────────────── */
  --accent:              #1A1A19;
  --accent-hover:        #2D2D2B;
  --accent-muted:        #52524E;

  /* ── Sidebar (dark rail) ─────────────────────────────────────────────── */
  --sidebar-bg:          #1C1C1B;
  --sidebar-text:        #E8E8E4;
  --sidebar-text-muted:  #8A8A86;
  --sidebar-text-faint:  #5A5A56;
  --sidebar-border:      #2D2D2B;
  --sidebar-hover:       #2D2D2B;
  --sidebar-active:      #363633;

  /* ── Status ────────────────────────────────────────────────────────────── */
  --status-success:      #2E7D4F;
  --status-success-bg:   #F0F9F1;
  --status-warning:      #B47A1A;
  --status-warning-bg:   #FDF8ED;
  --status-error:        #C53030;
  --status-error-bg:     #FEF2F0;
  --status-info:         #2B6CB0;
  --status-info-bg:      #EDF2FF;

  /* ── Role badges ───────────────────────────────────────────────────────── */
  --role-admin-bg:       #FDF8ED;
  --role-admin-text:     #92400E;
  --role-admin-border:   #F5E6C8;
  --role-candidate-bg:   #EDF2FF;
  --role-candidate-text: #1E40AF;
  --role-candidate-border: #C8D8F5;
  --role-recruiter-bg:   #F0F9F1;
  --role-recruiter-text: #166534;
  --role-recruiter-border: #C8E8CC;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display:  "Instrument Serif", Georgia, serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     "JetBrains Mono", "Fira Code", monospace;

  --text-xs:       0.6875rem;   /* 11px */
  --text-sm:       0.8125rem;   /* 13px */
  --text-base:     0.875rem;    /* 14px */
  --text-md:       1rem;        /* 16px */
  --text-lg:       1.125rem;    /* 18px */
  --text-xl:       1.5rem;      /* 24px */
  --text-2xl:      2rem;        /* 32px */
  --text-3xl:      2.5rem;      /* 40px */
  --text-display:  3.5rem;      /* 56px — editorial display numerals */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ── Spacing (4px base) ────────────────────────────────────────────────── */
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-pill: 9999px;

  /* ── Content widths ────────────────────────────────────────────────────── */
  --width-narrow:   640px;
  --width-default:  768px;
  --width-wide:     960px;
  --width-full:    1200px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    400ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Skeleton pulse (used by shared SkeletonBlock primitive) ─────────────── */
@keyframes ithras-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}