@layer tokens {
  :root {
    /* ========================
       Primitive Tokens
       ======================== */

    /* Grays (neutral) */
    --gray-50:  oklch(0.97 0 0);       /* #f4f4f4 */
    --gray-100: oklch(0.93 0 0);
    --gray-200: oklch(0.87 0 0);
    --gray-300: oklch(0.80 0 0);
    --gray-400: oklch(0.68 0 0);
    --gray-500: oklch(0.55 0 0);
    --gray-600: oklch(0.48 0 0);       /* #646464 */
    --gray-700: oklch(0.39 0 0);       /* #4b4b4b */
    --gray-800: oklch(0.34 0 0);       /* #3d3d3d */
    --gray-900: oklch(0.30 0 0);       /* #323232 */

    /* Blue */
    --blue-50:  oklch(0.95 0.02 265);
    --blue-100: oklch(0.90 0.04 265);
    --blue-500: oklch(0.55 0.18 265);
    --blue-700: oklch(0.35 0.19 265);  /* #092da3 */
    --blue-900: oklch(0.25 0.15 265);

    /* Lime / Accent Green */
    --lime-400: oklch(0.93 0.19 118);  /* #daff61 */

    /* Surface (from Figma header) */
    --surface-light: oklch(0.97 0.005 270);  /* #f3f5fa */

    /* Border (from Figma header) */
    --border-light: oklch(0.80 0.005 270);   /* #c0c2c8 */

    /* ========================
       Semantic Tokens
       ======================== */

    /* Text */
    --color-text-primary:   var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-inverse:   oklch(1 0 0);

    /* Surfaces */
    --color-surface:       var(--surface-light);
    --color-surface-hover: var(--gray-100);

    /* Accent / Brand */
    --color-accent:        var(--blue-700);
    --color-accent-light:  var(--lime-400);

    /* Borders */
    --color-border:        var(--border-light);

    /* ========================
       Typography (fluid)
       ======================== */
    --font-display:    clamp(2rem, 1.27rem + 3.29vw, 4rem);
    --font-heading-l:  clamp(1.5rem, 1.03rem + 2.11vw, 2.75rem);
    --font-heading-m:  clamp(1.25rem, 0.97rem + 1.27vw, 2rem);
    --font-heading-s:  clamp(1.125rem, 0.99rem + 0.56vw, 1.5rem);
    --font-body:       clamp(0.875rem, 0.82rem + 0.19vw, 1rem);
    --font-small:      clamp(0.75rem, 0.71rem + 0.19vw, 0.875rem);

    /* ========================
       Spacing (fluid)
       ======================== */
    --space-3xs: clamp(0.25rem, 0.21rem + 0.19vw, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem);
    --space-xs:  clamp(0.75rem, 0.64rem + 0.47vw, 1.125rem);
    --space-s:   clamp(1rem, 0.86rem + 0.66vw, 1.5rem);
    --space-m:   clamp(1.5rem, 1.27rem + 0.94vw, 2.25rem);
    --space-l:   clamp(2rem, 1.69rem + 1.41vw, 3rem);
    --space-xl:  clamp(3rem, 2.53rem + 2.11vw, 4.5rem);
    --space-2xl: clamp(4rem, 3.39rem + 2.82vw, 6rem);

    /* ========================
       Radius
       ======================== */
    --radius-s:    0.25rem;
    --radius-m:    0.5rem;
    --radius-l:    1rem;
    --radius-full: 9999px;

    /* ========================
       Shadow
       ======================== */
    --shadow-s: 0 1px 2px oklch(0 0 0 / 0.05);
    --shadow-m: 0 4px 6px oklch(0 0 0 / 0.07);
    --shadow-l: 0 10px 15px oklch(0 0 0 / 0.1);

    /* ========================
       Motion
       ======================== */
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   500ms;

    /* ========================
       Z-index
       ======================== */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-toast:    400;

    /* ========================
       Font Family
       ======================== */
    --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-hero: "LINE Seed JP_OTF", "LINE Seed JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  }
}