/* =========================================================
   KAFIL — Design Tokens
   Brand: KAFIL Red (signature) + Deep Navy (institutional)
   ========================================================= */

:root {
  /* Brand colors — KAFIL signature warm orange (vivid, not muted) */
  --kafil-orange:       #E5832E;   /* primary signature — clearer, more saturated */
  --kafil-orange-dark:  #B66220;
  --kafil-orange-light: #F2A14A;
  --kafil-orange-tint:  #FCEEDB;   /* warm bg tint */

  /* Backward-compat aliases (existing CSS keeps working) */
  --kafil-red:       var(--kafil-orange);
  --kafil-red-dark:  var(--kafil-orange-dark);
  --kafil-red-light: var(--kafil-orange-light);
  --kafil-red-tint:  var(--kafil-orange-tint);

  --kafil-navy: #1B2A4E;           /* institutional dark */
  --kafil-navy-dark: #0F1B3D;
  --kafil-navy-light: #2C3E68;

  --kafil-gold: #C9A661;           /* honors/citations — slightly brighter */
  --kafil-gold-light: #E2C68C;

  /* Neutrals */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF7;          /* page bg, slightly warm */
  --neutral-100: #F4F4F1;
  --neutral-200: #E8E8E4;
  --neutral-300: #D1D1CC;
  --neutral-400: #9C9C97;
  --neutral-500: #6B6B66;
  --neutral-600: #4D4D49;
  --neutral-700: #2D2D2A;
  --neutral-800: #1A1A18;
  --neutral-900: #0E0E0D;

  /* Semantic */
  --bg-page:        var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-elevated:    var(--neutral-0);
  --bg-muted:       var(--neutral-100);
  --bg-inverse:     var(--kafil-navy-dark);

  --text-primary:   var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-on-dark:   var(--neutral-50);
  --text-link:      var(--kafil-red);
  --text-link-hover: var(--kafil-red-dark);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);

  /* Status (for forms/admin) */
  --status-success: #2F7D4F;
  --status-warning: #B5832B;
  --status-error:   #B83B3B;
  --status-info:    #2C5BAB;

  /* Typography */
  --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system,
               'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-serif: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'D2Coding', ui-monospace, monospace;
  --font-display: var(--font-sans);

  /* Type scale (boosted for readability — older eyes friendly) */
  --text-2xs: 0.8125rem; /* 13 (was 12) */
  --text-xs:  0.875rem;  /* 14 (was 13) */
  --text-sm:  0.9375rem; /* 15 (was 14) */
  --text-base:1.0625rem; /* 17 (was 16) — body */
  --text-md:  1.1875rem; /* 19 (was 18) */
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  1.5rem;    /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.25rem;   /* 36 */
  --text-4xl: 3rem;      /* 48 */
  --text-5xl: 3.75rem;   /* 60 */
  --text-6xl: 4.5rem;    /* 72 */

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2.0;

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

  /* Spacing scale (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;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-padding: 24px;
  --container-padding-sm: 20px;

  --header-height: 88px;
  --header-height-mobile: 64px;

  /* Radii */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 27, 61, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 27, 61, 0.06);
  --shadow-md: 0 6px 16px rgba(15, 27, 61, 0.08);
  --shadow-lg: 0 14px 30px rgba(15, 27, 61, 0.10);
  --shadow-xl: 0 24px 50px rgba(15, 27, 61, 0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* Dark mode (optional toggle) */
[data-theme="dark"] {
  --bg-page:     var(--neutral-900);
  --bg-surface:  var(--neutral-800);
  --bg-elevated: var(--neutral-700);
  --bg-muted:    var(--neutral-700);

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary:  var(--neutral-400);

  --border-subtle:  var(--neutral-700);
  --border-default: var(--neutral-600);
  --border-strong:  var(--neutral-500);
}