/* ============================================================
   CheckRing (체크링) — Foundational Tokens
   Yellow highlighter on an attendance sheet.
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  src: url("./fonts/PretendardVariable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("./fonts/Pretendard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono NL";
  src: url("./fonts/JetBrainsMonoNL-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Color: Brand -------- */
  --primary: #FFD02F;
  --primary-pressed: #F5B800;
  --on-primary: #050038;

  /* -------- Color: Ink (NEVER use #000) -------- */
  --ink: #050038;
  --ink-muted: #5B5B6E;
  --ink-faint: #9B9BA8;

  /* -------- Color: Surfaces -------- */
  --canvas: #FFFFFF;
  --canvas-grid: #FAFAFB;        /* login / marketing only */
  --surface: #FFFFFF;
  --surface-soft: #F6F6F9;
  --hairline: #E6E6EC;
  --hairline-soft: rgba(5, 0, 56, 0.06);

  /* -------- Color: Semantic -------- */
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --danger: #EF4444;
  --danger-soft: #FEE2E2;
  --info: #3B82F6;
  --info-soft: #DBEAFE;

  /* -------- Attendance status (the core mapping) -------- */
  --status-pending-bg: var(--surface-soft);
  --status-pending-fg: var(--ink-muted);
  --status-pending-dot: var(--ink-faint);

  --status-checkin-bg: var(--success-soft);
  --status-checkin-fg: var(--success);
  --status-checkin-dot: var(--success);

  --status-checkout-bg: var(--primary);
  --status-checkout-fg: var(--on-primary);
  --status-checkout-dot: var(--on-primary);

  /* -------- Type families -------- */
  --font-sans: "Pretendard Variable", "Pretendard", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono NL", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;

  /* -------- Spacing (4px scale) -------- */
  --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;

  /* -------- Radius -------- */
  --radius-sm: 6px;     /* chips, inputs (small) */
  --radius-md: 10px;    /* ★ buttons, fields  */
  --radius-lg: 16px;    /* cards, sheets */
  --radius-xl: 24px;    /* parent main card, big modals */
  --radius-pill: 999px; /* toggles / chips only — NEVER main CTA */
  --radius-full: 50%;

  /* -------- Shadow (sticky-note volume) -------- */
  --shadow-sm: 0 1px 2px rgba(5, 0, 56, 0.04);
  --shadow-md: 0 2px 8px rgba(5, 0, 56, 0.06);
  --shadow-lg: 0 8px 24px rgba(5, 0, 56, 0.10);
  --shadow-focus: 0 0 0 4px rgba(255, 208, 47, 0.30);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms ease-out;
  --motion-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* -------- Type scale (line-height / size / weight / tracking) --- */
  --t-display-lg: 700 40px/48px var(--font-sans);
  --t-display-md: 700 32px/40px var(--font-sans);
  --t-title-lg:   700 24px/32px var(--font-sans);
  --t-title-md:   600 20px/28px var(--font-sans);
  --t-title-sm:   600 17px/24px var(--font-sans);
  --t-body-lg:    500 16px/24px var(--font-sans);
  --t-body-md:    400 15px/22px var(--font-sans);
  --t-body-sm:    400 13px/20px var(--font-sans);
  --t-caption:    500 12px/16px var(--font-sans);
  --t-mono-md:    500 16px/24px var(--font-mono);
  --t-mono-sm:    500 13px/20px var(--font-mono);
}

/* ============================================================
   Base reset + element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font: var(--t-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display + titles */
.display-lg { font: var(--t-display-lg); letter-spacing: -1.0px; }
.display-md { font: var(--t-display-md); letter-spacing: -0.8px; }
.title-lg   { font: var(--t-title-lg);   letter-spacing: -0.4px; }
.title-md   { font: var(--t-title-md);   letter-spacing: -0.3px; }
.title-sm   { font: var(--t-title-sm);   letter-spacing: -0.2px; }
.body-lg    { font: var(--t-body-lg); }
.body-md    { font: var(--t-body-md); }
.body-sm    { font: var(--t-body-sm); }
.caption    { font: var(--t-caption); letter-spacing: 0.2px; }
.mono-md    { font: var(--t-mono-md); font-variant-numeric: tabular-nums; }
.mono-sm    { font: var(--t-mono-sm); font-variant-numeric: tabular-nums; }

h1 { font: var(--t-display-md); letter-spacing: -0.8px; margin: 0; }
h2 { font: var(--t-title-lg);   letter-spacing: -0.4px; margin: 0; }
h3 { font: var(--t-title-md);   letter-spacing: -0.3px; margin: 0; }
h4 { font: var(--t-title-sm);   letter-spacing: -0.2px; margin: 0; }
p  { font: var(--t-body-md); margin: 0; }
small { font: var(--t-body-sm); color: var(--ink-muted); }
code, kbd, samp { font: var(--t-mono-sm); font-variant-numeric: tabular-nums; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink-muted); }

::selection { background: var(--primary); color: var(--on-primary); }

/* All mono numbers always tabular */
.mono, [data-mono] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }