/*
 * INNOWEDDING design tokens
 * Runtime source of truth. Edit this file first, then run:
 *   node tools/check-design-tokens.mjs
 *
 * The legacy aliases at the end keep the current public/admin CSS working while
 * components are migrated incrementally to the --inno-* contract.
 */

:root {
  /* Reference colors */
  --inno-ref-color-teal-950: #163b3c;
  --inno-ref-color-teal-900: #1f5959;
  --inno-ref-color-teal-800: #2c7370;
  --inno-ref-color-teal-700: #4c918b;
  --inno-ref-color-teal-100: #eaf4f1;
  --inno-ref-color-teal-50: #f2f8f6;
  --inno-ref-color-champagne-800: #88572c;
  --inno-ref-color-champagne-700: #9b6938;
  --inno-ref-color-champagne-500: #c4965d;
  --inno-ref-color-champagne-300: #e7cda8;
  --inno-ref-color-champagne-100: #f8ebdc;
  --inno-ref-color-ivory-0: #ffffff;
  --inno-ref-color-ivory-50: #fffefb;
  --inno-ref-color-ivory-100: #fbf6ef;
  --inno-ref-color-ivory-200: #f8f4ed;
  --inno-ref-color-ink-900: #263739;
  --inno-ref-color-ink-700: #536568;
  --inno-ref-color-ink-600: #667477;
  --inno-ref-color-ink-400: #879290;
  --inno-ref-color-success-700: #27723a;
  --inno-ref-color-success-100: #eaf7ed;
  --inno-ref-color-danger-700: #a63b3b;
  --inno-ref-color-danger-100: #fff2f2;
  --inno-ref-color-warning-700: #8c5d22;
  --inno-ref-color-warning-100: #fff8e6;
  --inno-ref-color-info-700: #275d97;
  --inno-ref-color-info-100: #e7f1ff;
  --inno-ref-color-kakao-500: #fee500;
  --inno-ref-color-kakao-900: #332900;

  /* Semantic colors */
  --inno-sys-color-bg-canvas: var(--inno-ref-color-ivory-50);
  --inno-sys-color-bg-surface: var(--inno-ref-color-ivory-0);
  --inno-sys-color-bg-subtle: var(--inno-ref-color-teal-50);
  --inno-sys-color-bg-warm: var(--inno-ref-color-ivory-100);
  --inno-sys-color-text-primary: var(--inno-ref-color-ink-900);
  --inno-sys-color-text-secondary: var(--inno-ref-color-ink-600);
  --inno-sys-color-text-tertiary: var(--inno-ref-color-ink-400);
  --inno-sys-color-text-inverse: var(--inno-ref-color-ivory-0);
  --inno-sys-color-text-accent: var(--inno-ref-color-champagne-800);
  --inno-sys-color-text-link: var(--inno-ref-color-teal-900);
  --inno-sys-color-border-subtle: rgba(31, 89, 89, .13);
  --inno-sys-color-border-default: rgba(31, 89, 89, .2);
  --inno-sys-color-border-strong: rgba(31, 89, 89, .38);
  --inno-sys-color-action-primary: var(--inno-ref-color-teal-900);
  --inno-sys-color-action-primary-hover: var(--inno-ref-color-teal-950);
  --inno-sys-color-action-secondary: var(--inno-ref-color-champagne-500);
  --inno-sys-color-action-secondary-hover: var(--inno-ref-color-champagne-800);
  --inno-sys-color-focus: var(--inno-ref-color-teal-700);
  --inno-sys-color-status-success: var(--inno-ref-color-success-700);
  --inno-sys-color-status-success-bg: var(--inno-ref-color-success-100);
  --inno-sys-color-status-danger: var(--inno-ref-color-danger-700);
  --inno-sys-color-status-danger-bg: var(--inno-ref-color-danger-100);
  --inno-sys-color-status-warning: var(--inno-ref-color-warning-700);
  --inno-sys-color-status-warning-bg: var(--inno-ref-color-warning-100);
  --inno-sys-color-status-info: var(--inno-ref-color-info-700);
  --inno-sys-color-status-info-bg: var(--inno-ref-color-info-100);
  --inno-sys-color-kakao-bg: var(--inno-ref-color-kakao-500);
  --inno-sys-color-kakao-text: var(--inno-ref-color-kakao-900);
  --inno-sys-color-glass-surface: rgba(255, 255, 255, .9);
  --inno-sys-color-glass-border: rgba(255, 255, 255, .78);
  --inno-sys-color-overlay-hero-start: rgba(250, 248, 242, .9);
  --inno-sys-color-overlay-hero-mid: rgba(250, 248, 242, .55);
  --inno-sys-color-overlay-hero-end: rgba(250, 248, 242, .08);

  /* Font families, weights, sizes, line heights and tracking */
  --inno-ref-font-family-sans: Pretendard, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --inno-ref-font-family-display: "Noto Serif KR", Georgia, serif;
  --inno-ref-font-weight-regular: 400;
  --inno-ref-font-weight-medium: 500;
  --inno-ref-font-weight-semibold: 600;
  --inno-ref-font-weight-bold: 700;
  --inno-ref-font-weight-extrabold: 800;
  --inno-ref-font-size-75: .75rem;
  --inno-ref-font-size-87: .875rem;
  --inno-ref-font-size-100: 1rem;
  --inno-ref-font-size-112: 1.125rem;
  --inno-ref-font-size-125: 1.25rem;
  --inno-ref-font-size-150: 1.5rem;
  --inno-ref-font-size-200: 2rem;
  --inno-ref-font-size-250: 2.5rem;
  --inno-ref-font-size-350: 3.5rem;
  --inno-ref-font-size-465: 4.65rem;
  --inno-ref-line-height-display: 1.08;
  --inno-ref-line-height-tight: 1.16;
  --inno-ref-line-height-label: 1.4;
  --inno-ref-line-height-caption: 1.55;
  --inno-ref-line-height-control: 1.65;
  --inno-ref-line-height-lead: 1.75;
  --inno-ref-line-height-body: 1.8;
  --inno-ref-letter-spacing-display: -.055em;
  --inno-ref-letter-spacing-heading: -.045em;
  --inno-ref-letter-spacing-eyebrow: .16em;
  --inno-sys-type-body-size: var(--inno-ref-font-size-100);
  --inno-sys-type-body-line: var(--inno-ref-line-height-body);
  --inno-sys-type-caption-size: var(--inno-ref-font-size-75);
  --inno-sys-type-label-size: var(--inno-ref-font-size-87);
  --inno-sys-type-hero-min: var(--inno-ref-font-size-200);
  --inno-sys-type-hero-max: var(--inno-ref-font-size-465);
  --inno-sys-type-hero-fluid: clamp(var(--inno-sys-type-hero-min), 4.2vw, var(--inno-sys-type-hero-max));
  --inno-sys-type-heading-fluid: clamp(var(--inno-ref-font-size-200), 3.5vw, 3.45rem);

  /* Four-pixel spacing scale and responsive layout */
  --inno-ref-space-0: 0px;
  --inno-ref-space-1: .25rem;
  --inno-ref-space-2: .5rem;
  --inno-ref-space-3: .75rem;
  --inno-ref-space-4: 1rem;
  --inno-ref-space-5: 1.25rem;
  --inno-ref-space-6: 1.5rem;
  --inno-ref-space-8: 2rem;
  --inno-ref-space-10: 2.5rem;
  --inno-ref-space-12: 3rem;
  --inno-ref-space-16: 4rem;
  --inno-ref-space-20: 5rem;
  --inno-ref-space-24: 6rem;
  --inno-ref-space-30: 7.5rem;
  --inno-sys-layout-container-max: 80rem;
  --inno-sys-layout-gutter-min: .9375rem;
  --inno-sys-layout-gutter-max: 1.5rem;
  --inno-sys-layout-gutter-fluid: clamp(var(--inno-sys-layout-gutter-min), 3vw, var(--inno-sys-layout-gutter-max));
  --inno-sys-layout-section-min: 5.125rem;
  --inno-sys-layout-section-max: 7.5rem;
  --inno-sys-layout-section-fluid: clamp(var(--inno-sys-layout-section-min), 8vw, var(--inno-sys-layout-section-max));

  /* Radius */
  --inno-ref-radius-1: .375rem;
  --inno-ref-radius-2: .75rem;
  --inno-ref-radius-3: 1rem;
  --inno-ref-radius-4: 1.375rem;
  --inno-ref-radius-5: 1.625rem;
  --inno-ref-radius-6: 2rem;
  --inno-ref-radius-pill: 999px;
  --inno-sys-radius-input: var(--inno-ref-radius-2);
  --inno-sys-radius-button: var(--inno-ref-radius-pill);
  --inno-sys-radius-card: var(--inno-ref-radius-4);
  --inno-sys-radius-card-large: var(--inno-ref-radius-5);
  --inno-sys-radius-glass: var(--inno-ref-radius-6);

  /* Elevation */
  --inno-ref-shadow-sm: 0px 8px 24px 0px #163b3c14;
  --inno-ref-shadow-md: 0px 14px 38px 0px #163b3c1a;
  --inno-ref-shadow-lg: 0px 20px 55px 0px #2a4a4817;
  --inno-ref-shadow-xl: 0px 28px 80px 0px #163b3c29;
  --inno-sys-shadow-surface: var(--inno-ref-shadow-lg);
  --inno-sys-shadow-elevated: var(--inno-ref-shadow-xl);
  --inno-sys-shadow-focus: 0px 0px 0px 4px #4c918b1f;

  /*
   * Breakpoint manifest. Native CSS cannot interpolate custom properties in
   * @media, so production queries keep matching literals and the checker guards
   * against drift.
   */
  --inno-ref-breakpoint-compact: 420px;
  --inno-ref-breakpoint-mobile: 680px;
  --inno-ref-breakpoint-content: 720px;
  --inno-ref-breakpoint-image-mobile: 767px;
  --inno-ref-breakpoint-admin-tablet: 1000px;
  --inno-ref-breakpoint-tablet: 1020px;
  --inno-ref-breakpoint-nav: 1240px;

  /* Motion */
  --inno-ref-motion-duration-fast: 150ms;
  --inno-ref-motion-duration-standard: 220ms;
  --inno-ref-motion-duration-slow: 450ms;
  --inno-ref-motion-duration-reveal: 650ms;
  --inno-ref-motion-duration-carousel: 900ms;
  --inno-ref-motion-duration-ambient: 6800ms;
  --inno-ref-motion-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --inno-ref-motion-ease-enter: cubic-bezier(0, 0, .2, 1);
  --inno-ref-motion-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Legacy public aliases */
  --navy-950: var(--inno-ref-color-teal-950);
  --navy-900: var(--inno-ref-color-teal-900);
  --navy-800: var(--inno-ref-color-teal-800);
  --gold-500: var(--inno-ref-color-champagne-500);
  --gold-300: var(--inno-ref-color-champagne-300);
  --ivory-50: var(--inno-ref-color-ivory-50);
  --ivory-100: var(--inno-ref-color-ivory-100);
  --ink-900: var(--inno-sys-color-text-primary);
  --muted-600: var(--inno-sys-color-text-secondary);
  --line: var(--inno-sys-color-border-subtle);
  --shadow: var(--inno-sys-shadow-surface);
  --radius: var(--inno-sys-radius-card-large);
  --radius-sm: var(--inno-ref-radius-3);
  --serif: var(--inno-ref-font-family-display);
  --sans: var(--inno-ref-font-family-sans);

  /* Legacy admin aliases */
  --navy: var(--inno-ref-color-teal-900);
  --navy2: var(--inno-ref-color-teal-800);
  --gold: var(--inno-ref-color-champagne-500);
  --gold2: var(--inno-ref-color-champagne-300);
  --cream: var(--inno-ref-color-ivory-100);
  --ink: var(--inno-sys-color-text-primary);
  --muted: var(--inno-sys-color-text-secondary);
  --danger: var(--inno-ref-color-danger-700);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --inno-ref-motion-duration-fast: 1ms;
    --inno-ref-motion-duration-standard: 1ms;
    --inno-ref-motion-duration-slow: 1ms;
    --inno-ref-motion-duration-reveal: 1ms;
    --inno-ref-motion-duration-carousel: 1ms;
    --inno-ref-motion-duration-ambient: 1ms;
  }
}