@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-800.woff2") format("woff2");
}

:root {
  --sea-50: oklch(0.975 0.014 183);
  --sea-100: oklch(0.945 0.026 183);
  --sea-200: oklch(0.895 0.042 183);
  --sea-300: oklch(0.815 0.06 183);
  --sea-400: oklch(0.715 0.078 183);
  --sea-500: oklch(0.62 0.09 183);
  --sea-600: oklch(0.54 0.084 183);
  --sea-700: oklch(0.455 0.072 183);
  --sea-800: oklch(0.36 0.058 183);
  --sea-900: oklch(0.27 0.044 183);

  --coral-100: oklch(0.94 0.03 40);
  --coral-300: oklch(0.845 0.075 40);
  --coral-500: oklch(0.7 0.135 40);
  --coral-600: oklch(0.615 0.14 40);
  --coral-700: oklch(0.53 0.125 40);

  --ink-300: oklch(0.74 0.02 200);
  --ink-500: oklch(0.545 0.028 200);
  --ink-700: oklch(0.38 0.032 200);
  --ink-900: oklch(0.245 0.03 200);

  --paper: oklch(0.99 0.006 150);
  --paper-warm: oklch(0.975 0.012 90);

  --success: oklch(0.62 0.1 155);
  --warning: oklch(0.75 0.13 75);
  --danger: oklch(0.58 0.16 25);

  --glass: oklch(0.99 0.008 180 / 0.72);
  --glass-strong: oklch(0.99 0.008 180 / 0.9);
  --glass-quiet: oklch(0.99 0.008 180 / 0.5);
  --glass-deep: oklch(0.27 0.05 190 / 0.42);
  --glass-deep-hover: oklch(0.27 0.05 190 / 0.58);

  --line: oklch(0.62 0.03 190 / 0.14);
  --line-strong: oklch(0.62 0.03 190 / 0.26);
  --line-invert: oklch(1 0 0 / 0.22);

  --on-glass: var(--ink-900);
  --on-glass-sub: var(--ink-700);
  --on-glass-faint: var(--ink-500);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --sh-1: 0 1px 2px oklch(0.27 0.044 183 / 0.06), 0 1px 3px oklch(0.27 0.044 183 / 0.07);
  --sh-2: 0 2px 6px oklch(0.27 0.044 183 / 0.07), 0 6px 16px oklch(0.27 0.044 183 / 0.07);
  --sh-3: 0 8px 24px oklch(0.27 0.044 183 / 0.1), 0 2px 6px oklch(0.27 0.044 183 / 0.05);
  --sh-4: 0 20px 56px oklch(0.27 0.044 183 / 0.16), 0 4px 12px oklch(0.27 0.044 183 / 0.07);
  --sh-inset: inset 0 1px 0 oklch(1 0 0 / 0.6);
  --sh-inset-quiet: inset 0 1px 0 oklch(1 0 0 / 0.32);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);

  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 340ms;
  --d-scene: 560ms;

  --font-sans: "Plus Jakarta Sans", "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
    Consolas, "Courier New", monospace;

  --fs-display-xl: clamp(2.75rem, 6vw, 5.5rem);
  --fs-display: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-title: clamp(1.125rem, 1.8vw, 1.375rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-micro: 0.75rem;

  --shell-max: 1440px;
  --nav-h: 3rem;

  --background: 0 0% 100%;
  --foreground: 0 0% 15%;
  --muted: 0 0% 45%;
  --soft: 0 0% 62%;
  --faint: 0 0% 72%;
  --radius: var(--r-md);
}

@supports not (color: oklch(0 0 0)) {
  :root {
    --sea-50: #edfaf8;
    --sea-100: #dbf3ee;
    --sea-200: #bfe6df;
    --sea-300: #97d0c6;
    --sea-400: #67b3a8;
    --sea-500: #3a988b;
    --sea-600: #257e73;
    --sea-700: #19645a;
    --sea-800: #0e4740;
    --sea-900: #052d28;

    --coral-100: #fee5dc;
    --coral-300: #f8bca8;
    --coral-500: #e47f5b;
    --coral-600: #c9633e;
    --coral-700: #a64e2e;

    --ink-300: #9dafb0;
    --ink-500: #5d7576;
    --ink-700: #2d4849;
    --ink-900: #0d2526;

    --paper: #f9fdfa;
    --paper-warm: #faf7ee;

    --success: #50986b;
    --warning: #dea143;
    --danger: #c74b47;

    --glass: rgba(249, 253, 250, 0.72);
    --glass-strong: rgba(249, 253, 250, 0.9);
    --glass-quiet: rgba(249, 253, 250, 0.5);
    --glass-deep: rgba(13, 37, 38, 0.42);
    --glass-deep-hover: rgba(13, 37, 38, 0.58);

    --line: rgba(58, 152, 139, 0.14);
    --line-strong: rgba(58, 152, 139, 0.26);

    --sh-1: 0 1px 2px rgba(5, 45, 40, 0.06), 0 1px 3px rgba(5, 45, 40, 0.07);
    --sh-2: 0 2px 6px rgba(5, 45, 40, 0.07), 0 6px 16px rgba(5, 45, 40, 0.07);
    --sh-3: 0 8px 24px rgba(5, 45, 40, 0.1), 0 2px 6px rgba(5, 45, 40, 0.05);
    --sh-4: 0 20px 56px rgba(5, 45, 40, 0.16), 0 4px 12px rgba(5, 45, 40, 0.07);
  }
}