/* ============================================================
   Design tokens — the ONLY place raw hex literals live.
   Everything else references var(--…).
   ============================================================ */
:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --c-orange: #f15a2a;        /* primary CTA */
  --c-orange-ink: #d94000;    /* active text on light pink */
  --c-orange-soft: #fff1ec;   /* faint orange wash */
  --c-blue: #4169e1;          /* secondary / links / toggles */
  --c-blue-soft: #f0f3fd;     /* selected row wash */
  --c-blue-soft-2: #eef1fd;
  --c-dark: #111118;          /* login/register panel + strong text */

  /* ── Surfaces & lines ──────────────────────────────────── */
  --c-bg: #f9f9f9;            /* app main content background */
  --c-surface: #ffffff;       /* cards / inputs / modal */
  --c-surface-2: #f5f5f7;     /* form panel background */
  --c-surface-3: #f5f5f5;     /* subtle fills (table head, company badge) */
  --c-surface-hover: #fafafa;
  --c-surface-hover-2: #f4f4f4;
  --c-border: #e0e0e0;
  --c-border-strong: #d8d8d8;
  --c-border-input: #e3e3e3;
  --c-border-input-2: #d0d0d0;
  --c-divider: #e8e8e8;
  --c-table-border: #d4d4d4;  /* invoice table cell borders */

  /* ── Sidebar active ────────────────────────────────────── */
  --c-sidebar-active-bg: #ffe9e9;
  --c-sidebar-active-fg: var(--c-orange-ink);

  /* ── Text ──────────────────────────────────────────────── */
  --c-text: #222222;
  --c-text-strong: #111111;
  --c-text-2: #444444;
  --c-text-3: #555555;
  --c-text-4: #666666;
  --c-text-muted: #888888;
  --c-text-faint: #aaaaaa;
  --c-text-ghost: #999999;

  /* ── Status ────────────────────────────────────────────── */
  --c-success: #4caf50;
  --c-success-bg: #e8f5e9;
  --c-success-ink: #2e7d32;
  --c-danger: #f44336;
  --c-danger-bg: #ffebee;
  --c-danger-ink: #c62828;
  --c-warn: #ff9800;
  --c-warn-soft-bg: #fff3e0;
  --c-warn-soft-ink: #e65100;

  /* warning banner (header) */
  --c-warn-bg: #fffae6;
  --c-warn-border: #f0c040;
  --c-warn-ink: #c87000;

  /* badges (header) */
  --c-company-bg: #f5f5f5;
  --c-company-border: #d8d8d8;
  --c-company-text: #444444;
  --c-user-bg: #f0f3ff;
  --c-user-border: #c5cdff;
  --c-user-text: #4169e1;

  /* ── Radius ────────────────────────────────────────────── */
  --r-sm: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* ── Type scale ────────────────────────────────────────── */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-26: 26px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Spacing ───────────────────────────────────────────── */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;

  /* ── Shadows ───────────────────────────────────────────── */
  --sh-header: 0 1px 4px rgba(0, 0, 0, 0.06);
  --sh-card: 0 1px 6px rgba(0, 0, 0, 0.04);
  --sh-btn: 0 2px 8px rgba(241, 90, 42, 0.28);
  --sh-modal: 0 10px 40px rgba(0, 0, 0, 0.18);
  --ring: 0 0 0 3px rgba(241, 90, 42, 0.09);
  --ring-blue: 0 0 0 3px rgba(65, 105, 225, 0.12);
  --ring-error: 0 0 0 3px rgba(244, 67, 54, 0.1);
  --ring-field: 0 0 0 3px rgba(79, 70, 229, 0.14); /* indigo focus ring */

  /* ── Text field (design-system Text Field component) ───── */
  --c-indigo: #4f46e5;          /* interactive-brand — field focus */
  --c-indigo-hover: #4338ca;
  --c-border-field: #e6e9f0;    /* neutral-30 — field rest border */
  --c-border-field-strong: #cdd3e0; /* field hover border */

  /* ── Layout ────────────────────────────────────────────── */
  --header-h: 62px;
  --sidebar-w: 220px;
  --z-modal: 50;

  /* ── Font ──────────────────────────────────────────────── */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}