/* ============================================================
   HL Robotics — Design Tokens (production handoff)
   Source of truth: DESIGN-hlrobotics.md
   Single cyan accent · Apple-derived calm · Roboto + Noto Sans KR
   Use this file in a REAL codebase (React/Vue/plain web).
   Inside the design tool, Design Components use inline styles —
   this CSS is the engineering/dev-handoff format, not the DC format.
   ============================================================ */

:root {
  /* — Accent (single, non-negotiable) — */
  --hl-primary:          #00B4ED;  /* HL Cyan — every interactive element */
  --hl-primary-focus:    #2BC4F5;  /* focus ring + selected chip border   */
  --hl-primary-on-dark:  #3DCBF5;  /* Sky Cyan — in-copy links on dark     */

  /* — Surface — */
  --hl-canvas:           #ffffff;
  --hl-parchment:        #f5f5f7;
  --hl-pearl:            #fafafc;
  --hl-panel-1:          #1c1d1f;
  --hl-panel-2:          #202123;
  --hl-panel-3:          #18191b;
  --hl-black:            #000000;
  --hl-chip-translucent: rgba(210, 210, 215, 0.64);

  /* — Text — */
  --hl-ink:              #1d1d1f;
  --hl-on-dark:          #ffffff;
  --hl-body-muted:       #cccccc;
  --hl-ink-80:           #333333;
  --hl-ink-48:           #7a7a7a;

  /* — Hairline — */
  --hl-divider-soft:     #f0f0f0;
  --hl-hairline:         #e0e0e0;

  /* — Type families — */
  --hl-font:        "Roboto", "Noto Sans KR", system-ui, sans-serif;
  --hl-font-mono:   "Roboto Mono", ui-monospace, monospace;

  /* — Type scale: size / weight / line-height / tracking (Apple-derived) — */
  --hl-hero-size: 56px;   --hl-hero-weight: 700;  --hl-hero-lh: 1.07;  --hl-hero-ls: -0.28px;
  --hl-dlg-size:  40px;   --hl-dlg-weight: 700;   --hl-dlg-lh: 1.10;   --hl-dlg-ls: 0;
  --hl-dmd-size:  34px;   --hl-dmd-weight: 500;   --hl-dmd-lh: 1.47;   --hl-dmd-ls: -0.374px;
  --hl-lead-size: 28px;   --hl-lead-weight: 400;  --hl-lead-lh: 1.14;  --hl-lead-ls: 0.196px;
  --hl-tag-size:  21px;   --hl-tag-weight: 500;   --hl-tag-lh: 1.19;   --hl-tag-ls: 0.231px;
  --hl-body-size: 17px;   --hl-body-weight: 400;  --hl-body-lh: 1.47;  --hl-body-ls: -0.374px;
  --hl-cap-size:  14px;   --hl-cap-weight: 400;   --hl-cap-lh: 1.43;   --hl-cap-ls: -0.224px;
  --hl-mono-size: 12px;   --hl-mono-weight: 400;  --hl-mono-lh: 1.50;  --hl-mono-ls: 0.4px;

  /* — Fluid hero/headline (auto-responsive, no media query needed) — */
  --hl-hero-fluid: clamp(34px, 7vw, 56px);
  --hl-dlg-fluid:  clamp(26px, 4.5vw, 40px);

  /* — Spacing (base 8) — */
  --hl-space-xxs: 4px;  --hl-space-xs: 8px;  --hl-space-sm: 12px; --hl-space-md: 16px;
  --hl-space-lg: 24px;  --hl-space-xl: 32px; --hl-space-xxl: 48px; --hl-space-section: 80px;
  --hl-section-fluid: clamp(56px, 9vw, 80px);

  /* — Radius — */
  --hl-r-xs: 4px;  --hl-r-sm: 8px;  --hl-r-md: 11px;  --hl-r-lg: 16px;  --hl-r-pill: 9999px;

  /* — Elevation: exactly one shadow, for renders only — */
  --hl-render-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --hl-hairline-border: 1px solid var(--hl-hairline);

  /* — Motion (inherited micro-interaction grammar) — */
  --hl-ease-press: cubic-bezier(0.28, 0.11, 0.32, 1);
  --hl-dur-press:  0.25s;
  --hl-dur-color:  0.2s;
  --hl-scale-press: 0.96;        /* icon buttons 0.92 · chips 0.97 */
}

/* — Breakpoints (reference; Apple-derived) —
   1440 content lock · 1068 small-desktop · 833 tablet-landscape switch
   734 tablet-portrait · 640 phone · 480 small-phone                      */

/* ---------- Optional ready-made primitives ---------- */

.hl-body  { font-family: var(--hl-font); font-size: var(--hl-body-size); font-weight: var(--hl-body-weight); line-height: var(--hl-body-lh); letter-spacing: var(--hl-body-ls); color: var(--hl-ink); }
.hl-hero  { font-family: var(--hl-font); font-size: var(--hl-hero-fluid); font-weight: var(--hl-hero-weight); line-height: var(--hl-hero-lh); letter-spacing: var(--hl-hero-ls); }
.hl-h2    { font-family: var(--hl-font); font-size: var(--hl-dlg-fluid); font-weight: var(--hl-dlg-weight); line-height: var(--hl-dlg-lh); letter-spacing: var(--hl-dlg-ls); }
.hl-mono  { font-family: var(--hl-font-mono); font-size: var(--hl-mono-size); letter-spacing: var(--hl-mono-ls); }

/* Signature press interaction — apply to every interactive element */
.hl-interactive { transition: transform var(--hl-dur-press) var(--hl-ease-press), filter var(--hl-dur-color) ease, background-color var(--hl-dur-color) ease, color var(--hl-dur-color) ease; }
.hl-interactive:active { transform: scale(var(--hl-scale-press)); }
.hl-interactive:focus-visible { outline: 2px solid var(--hl-primary-focus); outline-offset: 2px; }

.hl-btn-primary { background: var(--hl-primary); color: var(--hl-on-dark); border: none; border-radius: var(--hl-r-pill); padding: 11px 22px; font: var(--hl-body-weight) var(--hl-body-size)/1 var(--hl-font); letter-spacing: var(--hl-body-ls); cursor: pointer; }
.hl-btn-primary:hover  { filter: brightness(1.07); }
.hl-btn-primary:active { transform: scale(var(--hl-scale-press)); filter: brightness(0.95); }

.hl-btn-secondary { background: transparent; color: var(--hl-primary); border: 1px solid var(--hl-primary); border-radius: var(--hl-r-pill); padding: 10px 21px; cursor: pointer; }
.hl-btn-secondary:hover  { background: var(--hl-primary); color: var(--hl-on-dark); }
.hl-btn-secondary:active { transform: scale(var(--hl-scale-press)); }

/* Naturally-responsive grids — no media query required */
.hl-grid    { display: grid; gap: var(--hl-space-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hl-grid-sm { display: grid; gap: var(--hl-space-md); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }