/* nmwc-framer-tokens.css · Framer canon spec-perfect (DESIGN.md alpha) · SUIT font exception */

:root {
  /* === Colors · exact spec hex values === */
  --primary: #ffffff;
  --on-primary: #000000;
  --accent-blue: #0099ff;
  --ink: #ffffff;
  --ink-muted: #999999;
  --canvas: #090909;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --hairline: #262626;
  --hairline-soft: #1a1a1a;
  --inverse-canvas: #ffffff;
  --inverse-ink: #000000;
  --semantic-success: #22c55e;
  --semantic-warning: #facc15;
  --semantic-error: #f87171;
  --semantic-info: #60a5fa;

  /* === Gradient anchors (single hex per spec; assemble as radial in components) === */
  --gradient-magenta: #d44df0;
  --gradient-violet: #6a4cf5;
  --gradient-orange: #ff7a3d;
  --gradient-coral: #ff5577;
  --gradient-magenta-fill: radial-gradient(circle at 25% 30%, #f0abfc 0%, #d44df0 30%, #a21caf 70%, #581c87 100%);
  --gradient-violet-fill: radial-gradient(circle at 25% 30%, #b39df9 0%, #6a4cf5 35%, #4c2db8 70%, #2e1065 100%);
  --gradient-orange-fill: radial-gradient(circle at 25% 30%, #ffb380 0%, #ff7a3d 35%, #d94a0a 70%, #7c2d12 100%);
  --gradient-coral-fill: radial-gradient(circle at 25% 30%, #ff99aa 0%, #ff5577 35%, #be1f3d 70%, #4c0519 100%);

  /* === Spacing · 9-tier scale (강제 base 단위 없음, 4·5px 혼합) === */
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-xxl: 40px;
  --space-section: 96px;

  /* === Radius · granular spec === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* === Typography · 12 tier · px-based tracking === */
  --fs-display-xxl: 110px; --ls-display-xxl: -5.5px;  --lh-display-xxl: 0.85;
  --fs-display-xl: 85px;   --ls-display-xl: -4.25px;  --lh-display-xl: 0.95;
  --fs-display-lg: 62px;   --ls-display-lg: -3.1px;   --lh-display-lg: 1.00;
  --fs-display-md: 32px;   --ls-display-md: -1.0px;   --lh-display-md: 1.13;
  --fs-headline: 22px;     --ls-headline: -0.8px;     --lh-headline: 1.20;
  --fs-subhead: 24px;      --ls-subhead: -0.01px;     --lh-subhead: 1.30;
  --fs-body-lg: 18px;      --ls-body-lg: -0.18px;     --lh-body-lg: 1.30;
  --fs-body: 15px;         --ls-body: -0.15px;        --lh-body: 1.30;
  --fs-body-sm: 14px;      --ls-body-sm: -0.14px;     --lh-body-sm: 1.40;
  --fs-caption: 13px;      --ls-caption: -0.13px;     --lh-caption: 1.20;
  --fs-micro: 12px;        --ls-micro: -0.12px;       --lh-micro: 1.20;
  --fs-button: 14px;       --ls-button: -0.14px;      --lh-button: 1.0;

  /* === Elevation · 4 level === */
  --elev-0: none;
  --elev-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 30px rgba(0, 0, 0, 0.25);
  --elev-3: 0 0 0 1px rgba(0, 153, 255, 0.45), 0 0 0 4px rgba(0, 153, 255, 0.15);

  /* === Shadows · 4 step — surface lift hierarchy === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* === Motion · duration scale + easing curves === */
  --motion-micro: 150ms;       /* button hover, small color shift */
  --motion-fast: 200ms;        /* tab switch, toggle */
  --motion-standard: 250ms;    /* card hover, menu expand */
  --motion-medium: 400ms;      /* modal enter, drawer slide */
  --motion-slow: 600ms;        /* page transition */
  --motion-brand: 800ms;       /* brand splash, intro */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);     /* enter */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);     /* exit */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* rare */

  /* === Legacy aliases for back-compat with existing inline page styles === */
  --bg: var(--canvas);
  --card: var(--surface-1);
  --elevated: var(--surface-2);
  --line: var(--hairline);
  --fg: var(--ink);
  --muted: var(--ink-muted);
  --accent: var(--accent-blue);
  --success: var(--semantic-success);
  --warning: var(--semantic-warning);
  --error: var(--semantic-error);
  --info: var(--semantic-info);
}

/* === Display heading defaults · font-size·weight만 spec — letter-spacing·line-height는 page가 명시 */
/* (고정 px letter-spacing을 작은 사이즈로 override하는 세션/카드의 h2·h3 자간 깨짐 방지) */
h1 { font-size: var(--fs-display-xxl); font-weight: 500; }
h2 { font-size: var(--fs-display-xl);  font-weight: 500; }
h3 { font-size: var(--fs-headline);    font-weight: 700; }

/* === Typography utility classes === */
.t-display-xxl { font-size: var(--fs-display-xxl); font-weight: 500; letter-spacing: var(--ls-display-xxl); line-height: var(--lh-display-xxl); }
.t-display-xl  { font-size: var(--fs-display-xl);  font-weight: 500; letter-spacing: var(--ls-display-xl);  line-height: var(--lh-display-xl);  }
.t-display-lg  { font-size: var(--fs-display-lg);  font-weight: 500; letter-spacing: var(--ls-display-lg);  line-height: var(--lh-display-lg);  }
.t-display-md  { font-size: var(--fs-display-md);  font-weight: 500; letter-spacing: var(--ls-display-md);  line-height: var(--lh-display-md);  }
.t-headline    { font-size: var(--fs-headline);    font-weight: 700; letter-spacing: var(--ls-headline);    line-height: var(--lh-headline);    }
.t-subhead     { font-size: var(--fs-subhead);     font-weight: 400; letter-spacing: var(--ls-subhead);     line-height: var(--lh-subhead);     }
.t-body-lg     { font-size: var(--fs-body-lg);     font-weight: 400; letter-spacing: var(--ls-body-lg);     line-height: var(--lh-body-lg);     }
.t-body        { font-size: var(--fs-body);        font-weight: 400; letter-spacing: var(--ls-body);        line-height: var(--lh-body);        }
.t-body-sm     { font-size: var(--fs-body-sm);     font-weight: 500; letter-spacing: var(--ls-body-sm);     line-height: var(--lh-body-sm);     }
.t-caption     { font-size: var(--fs-caption);     font-weight: 500; letter-spacing: var(--ls-caption);     line-height: var(--lh-caption);     text-transform: uppercase; }
.t-micro       { font-size: var(--fs-micro);       font-weight: 400; letter-spacing: var(--ls-micro);       line-height: var(--lh-micro);       }
.t-ink-muted   { color: var(--ink-muted); }

/* === Buttons (5 canonical variants) === */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 10px 15px; border: none; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn-primary:hover { opacity: 0.92; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-1); color: var(--ink);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 10px 15px; border: none;
  border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease;
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-translucent {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--ink);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 8px 14px; border: none;
  border-radius: var(--radius-xxl);
  cursor: pointer; text-decoration: none;
}

.btn-icon-circular {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--surface-1); color: var(--ink);
  border: none; border-radius: var(--radius-full);
  cursor: pointer;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 10px 15px; border: none;
  border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease;
}
.btn-ghost:hover { background: var(--surface-1); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--semantic-error); color: var(--inverse-ink);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 10px 15px; border: none;
  border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: opacity 0.15s ease;
}
.btn-danger:hover { opacity: 0.88; }
.btn-danger:active { transform: scale(0.97); }

/* Size modifiers · apply alongside .btn-primary/.btn-secondary/.btn-ghost/.btn-danger */
.btn-sm { padding: 6px 12px; font-size: var(--fs-caption); }
.btn-lg { padding: 14px 22px; font-size: var(--fs-body); }

/* Disabled modifier · spec applies to any .btn-* variant */
.btn-primary[disabled], .btn-secondary[disabled], .btn-translucent[disabled],
.btn-ghost[disabled], .btn-danger[disabled], .btn-icon-circular[disabled],
.btn-primary.btn-disabled, .btn-secondary.btn-disabled, .btn-translucent.btn-disabled,
.btn-ghost.btn-disabled, .btn-danger.btn-disabled, .btn-icon-circular.btn-disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* === Pricing tabs (toggle group) === */
.pricing-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--canvas); color: var(--ink-muted);
  font-family: inherit; font-size: var(--fs-button); font-weight: 500;
  letter-spacing: var(--ls-button); line-height: var(--lh-button);
  padding: 8px 14px; border: none;
  border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.pricing-tab:hover { color: var(--ink); }
.pricing-tab.selected,
.pricing-tab[aria-selected="true"] {
  background: var(--surface-2); color: var(--ink);
}

/* === Text inputs · focus is level-3 blue ring === */
.text-input {
  display: block; width: 100%;
  background: var(--surface-1); color: var(--ink);
  font-family: inherit; font-size: var(--fs-body); font-weight: 400;
  letter-spacing: var(--ls-body); line-height: var(--lh-body);
  padding: 10px 14px; border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.text-input::placeholder { color: var(--ink-muted); }
.text-input:focus,
.text-input.focused {
  outline: none;
  border-color: rgba(0, 153, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.15);
}

/* === Cards (surface lift hierarchy) === */
.pricing-card {
  background: var(--surface-1); color: var(--ink);
  font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--lh-body);
  border-radius: var(--radius-xl); padding: 24px;
  box-shadow: var(--elev-1);
}
.pricing-card.featured,
.pricing-card-featured {
  background: var(--surface-2);
  box-shadow: var(--elev-2);
}
.template-card {
  background: var(--surface-1); color: var(--ink);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-body-sm);
  border-radius: var(--radius-lg); padding: 12px;
}
.product-mockup-tile {
  background: var(--surface-1); color: var(--ink);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-body-sm);
  border-radius: var(--radius-xl); padding: 16px;
  box-shadow: var(--elev-2);
}

/* === Gradient spotlight cards (signature) === */
.spot {
  color: var(--ink);
  font-size: var(--fs-subhead); letter-spacing: var(--ls-subhead); line-height: var(--lh-subhead);
  padding: 32px; border-radius: var(--radius-xl);
}
.spot-violet  { background: var(--gradient-violet-fill); }
.spot-magenta { background: var(--gradient-magenta-fill); }
.spot-orange  { background: var(--gradient-orange-fill); }
.spot-coral   { background: var(--gradient-coral-fill); }

/* === FAQ / comparison / feature rows === */
.faq-row {
  background: var(--canvas); color: var(--ink);
  font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--lh-body);
  border-radius: var(--radius-md); padding: 24px;
  border-bottom: 1px solid var(--hairline-soft);
}
.feature-row {
  background: var(--canvas); color: var(--ink);
  font-size: var(--fs-body); letter-spacing: var(--ls-body);
  padding: 14px 0; border-bottom: 1px solid var(--hairline-soft);
}
.comparison-row {
  background: var(--canvas); color: var(--ink-muted);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-body-sm);
  padding: 10px 0; border-bottom: 1px solid var(--hairline-soft);
}

/* === Footer (dense link grid) === */
.footer-grid {
  background: var(--canvas); color: var(--ink-muted);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption); line-height: var(--lh-caption);
  padding: 64px 32px;
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.footer-grid a { color: var(--ink-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }

/* === Surface tile utilities === */
.tile          { background: var(--surface-1); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--elev-1); }
.tile-featured { background: var(--surface-2); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--elev-2); }
.tile-floating { background: var(--surface-1); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--elev-2); }

/* === Focus ring · elevation level 3 === */
:focus-visible { outline: none; box-shadow: var(--elev-3); }

/* === Body OpenType (SUIT supports kern/liga/tnum) === */
body { font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1; font-variant-numeric: tabular-nums; }

/* === Responsive display scaling · preserve % tracking === */
@media (max-width: 1199px) {
  :root {
    --fs-display-xxl: 85px;  --ls-display-xxl: -4.25px;
    --fs-display-xl: 62px;   --ls-display-xl: -3.1px;
  }
}
@media (max-width: 810px) {
  :root {
    --fs-display-xxl: 62px;  --ls-display-xxl: -3.1px;
    --fs-display-xl: 48px;   --ls-display-xl: -2.4px;
    --fs-display-lg: 40px;   --ls-display-lg: -2.0px;
  }
}
@media (max-width: 480px) {
  :root {
    --fs-display-xxl: 40px;  --ls-display-xxl: -2.0px;
    --fs-display-xl: 32px;   --ls-display-xl: -1.6px;
  }
}