/* ==========================================================================
   Hilman Revanda: Design Tokens
   Single source of truth for colour, type, spacing, layout and motion.
   Source: Claude Design, "Portfolio v3".
   Breakpoints (CSS variables can't be used inside @media, keep in sync):
     ≤ 639px   hide the work number column
     ≤ 439px   hide the name next to the avatar
   ========================================================================== */

:root {
  /* ---- Colour ----------------------------------------------------------- */
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-ink: #161615;              /* text, primary button, section rules */
  --color-accent: oklch(0.56 0.19 35);
  --color-accent-ring: oklch(0.56 0.19 35 / 0.12);
  --color-success: oklch(0.62 0.15 150);
  --color-success-ring: oklch(0.62 0.15 150 / 0.45);
  --color-danger: oklch(0.52 0.19 28);
  --color-danger-bg: oklch(0.96 0.025 28);
  --color-danger-border: oklch(0.88 0.06 28);
  --color-badge-bg: oklch(0.95 0.03 35);
  --color-badge-fg: oklch(0.5 0.17 35);

  /* Greys, darkest to lightest. Every text grey is ≥ 4.5:1 on --color-bg
     and --color-surface (WCAG 2.2 AA). The design's lighter values
     (#77766f 4.4:1, #8a8983 3.4:1, #a3a29c 2.4:1) were darkened. */
  --color-text-2: #4d4c48;           /* pill text, tags, sending button */
  --color-text-3: #5c5b56;           /* body copy, image placeholders (6.5:1) */
  --color-text-4: #6b6a64;           /* meta, labels (5.2:1) */
  --color-text-5: #706f68;           /* small labels, footer, nav (4.8:1) */
  --color-text-6: #73726b;           /* numbers, placeholder, "Optional" (4.6:1) */
  --color-decor: #a3a29c;            /* non-text only: bullets */
  --color-dot-off: #c9c7c0;          /* closed status dot, link underline */

  --color-line: #e4e2dc;             /* hairlines */
  --color-line-soft: #efeee9;
  --color-line-strong: #d9d7d0;      /* outline button */
  --color-field-border: #8a8983;     /* input border, 3.5:1 on white (WCAG 1.4.11; design had #dcdad4) */
  --color-fill: #efeee9;             /* tags, image placeholders */
  --color-fill-hover: #e8e6df;

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

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

  --fs-h1-home: clamp(32px, 4.6vw, 58px);
  --fs-h1-page: clamp(36px, 5vw, 60px);
  --fs-h1-case: clamp(36px, 5.4vw, 68px);
  --fs-h1-404: clamp(36px, 5.4vw, 64px);
  --fs-h1-writeup: clamp(36px, 4.4vw, 52px);
  --fs-next: clamp(24px, 3vw, 40px);
  --fs-sent: clamp(26px, 3vw, 34px);
  --fs-clock: clamp(28px, 3vw, 36px);
  --fs-lead: clamp(16px, 1.4vw, 18px);
  --fs-lead-case: clamp(17px, 1.6vw, 20px);
  --fs-row: clamp(24px, 2.7vw, 32px);
  --fs-section: clamp(22px, 2.2vw, 26px);
  --fs-company: 21px;
  --fs-card: 20px;
  --fs-point: 18px;
  --fs-intro: 17px;
  --fs-body: 16px;
  --fs-ui: 15px;                     /* nav, buttons, inputs, section labels */
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;

  --tracking-display: -0.045em;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.025em;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --label-col: 220px;                /* left column on resume rows */

  /* ---- Radius ----------------------------------------------------------- */
  --radius-thumb: 10px;
  --radius-field: 10px;
  --radius-shot: 12px;
  --radius-card: 14px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 0.3s;
  --duration-enter: 0.8s;
  --transition-ui: color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    transform 0.2s var(--ease-out);
}