@import "tailwindcss";
@source ".";

@theme {
  --color-gray-1: var(--slate-1);
  --color-gray-2: var(--slate-2);
  --color-gray-3: var(--slate-3);
  --color-gray-4: var(--slate-4);
  --color-gray-5: var(--slate-5);
  --color-gray-6: var(--slate-6);
  --color-gray-7: var(--slate-7);
  --color-gray-8: var(--slate-8);
  --color-gray-9: var(--slate-9);
  --color-gray-10: var(--slate-10);
  --color-gray-11: var(--slate-11);
  --color-gray-12: var(--slate-12);

  --color-blue-1: var(--blue-1);
  --color-blue-2: var(--blue-2);
  --color-blue-3: var(--blue-3);
  --color-blue-4: var(--blue-4);
  --color-blue-5: var(--blue-5);
  --color-blue-6: var(--blue-6);
  --color-blue-7: var(--blue-7);
  --color-blue-8: var(--blue-8);
  --color-blue-9: var(--blue-9);
  --color-blue-10: var(--blue-10);
  --color-blue-11: var(--blue-11);
  --color-blue-12: var(--blue-12);
  --color-blue-surface: var(--blue-surface);
  --color-blue-contrast: var(--blue-contrast);

  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-surface-raised: var(--surface-raised);
  --color-surface-overlay: var(--surface-overlay);
  --color-surface-inverse: var(--surface-inverse);

  --color-ink: var(--ink);
  --color-ink-muted: var(--ink-muted);
  --color-ink-subtle: var(--ink-subtle);
  --color-ink-disabled: var(--ink-disabled);
  --color-ink-inverse: var(--ink-inverse);

  --color-line: var(--line);
  --color-line-muted: var(--line-muted);
  --color-line-strong: var(--line-strong);

  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-active: var(--accent-active);
  --color-accent-foreground: var(--accent-foreground);

  --color-success: var(--success);
  --color-success-hover: var(--success-hover);

  --color-warning: var(--warning);
  --color-warning-hover: var(--warning-hover);

  --color-danger: var(--danger);
  --color-danger-hover: var(--danger-hover);

  --color-info: var(--info);
  --color-info-hover: var(--info-hover);

  --color-focus-ring: var(--focus-ring);

  --font-serif: "Iowan Old Style", "Palatino", "Georgia", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --shadow-sm: var(--shadow-elevation-sm);
  --shadow-soft: var(--shadow-elevation-soft);
  --shadow-xl: var(--shadow-elevation-xl);
  --shadow-button: var(--shadow-elevation-button);
  --shadow-kbd: var(--shadow-elevation-kbd);

  --animate-dialog-overlay-in: dialog-overlay-in 160ms ease-out;
  --animate-dialog-overlay-out: dialog-overlay-out 120ms ease-in;
  --animate-dialog-content-in: dialog-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-dialog-content-out: dialog-content-out 120ms ease-in;
  --animate-dropdown-in: dropdown-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-dropdown-out: dropdown-out 100ms ease-in;

  @keyframes dialog-overlay-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes dialog-overlay-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes dialog-content-in {
    from {
      opacity: 0;
      scale: 0.96;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }

  @keyframes dialog-content-out {
    from {
      opacity: 1;
      scale: 1;
    }
    to {
      opacity: 0;
      scale: 0.96;
    }
  }

  @keyframes dropdown-in {
    from {
      opacity: 0;
      scale: 0.98;
      translate: 0 -2px;
    }
    to {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
  }

  @keyframes dropdown-out {
    from {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
    to {
      opacity: 0;
      scale: 0.98;
      translate: 0 -2px;
    }
  }
}

@layer base {
  :root {
    --slate-1: #fcfcfd;
    --slate-2: #f9f9fb;
    --slate-3: #f0f0f3;
    --slate-4: #e8e8ec;
    --slate-5: #e0e1e6;
    --slate-6: #d9d9e0;
    --slate-7: #cdced6;
    --slate-8: #b9bbc6;
    --slate-9: #8b8d98;
    --slate-10: #80838d;
    --slate-11: #60646c;
    --slate-12: #1c2024;

    --gray-a5: #00000014;

    --blue-1: #fbfdff;
    --blue-2: #f4faff;
    --blue-3: #e6f4fe;
    --blue-4: #d5efff;
    --blue-5: #c2e5ff;
    --blue-6: #acd8fc;
    --blue-7: #8ec8f6;
    --blue-8: #5eb1ef;
    --blue-9: #0090ff;
    --blue-10: #0588f0;
    --blue-11: #0d74ce;
    --blue-12: #113264;

    --blue-a1: #0080ff04;
    --blue-a2: #008cff0b;
    --blue-a3: #008ff519;
    --blue-a4: #009eff2a;
    --blue-a5: #0093ff3d;
    --blue-a6: #0088f653;
    --blue-a7: #0083eb71;
    --blue-a8: #0084e6a1;
    --blue-a9: #0090ff;
    --blue-a10: #0086f0fa;
    --blue-a11: #006dcbf2;
    --blue-a12: #002359ee;

    --blue-contrast: #fff;
    --blue-surface: #f1f9ffcc;
    --blue-indicator: #0090ff;
    --blue-track: #0090ff;

    /* surfaces */
    --surface: var(--slate-1);
    --surface-muted: var(--slate-3);
    --surface-raised: var(--slate-2);
    --surface-overlay: var(--slate-2);
    --surface-inverse: var(--slate-12);

    /* text */
    --ink: var(--slate-12);
    --ink-muted: var(--slate-11);
    --ink-subtle: var(--slate-9);
    --ink-disabled: var(--slate-8);
    --ink-inverse: var(--slate-1);

    /* borders */
    --line: var(--slate-6);
    --line-muted: var(--slate-5);
    --line-strong: var(--slate-8);

    /* actions */
    --accent: var(--blue-indicator);
    --accent-hover: var(--blue-10);
    --accent-active: var(--blue-11);
    --accent-foreground: var(--blue-contrast);

    /* feedback */
    --success: var(--color-emerald-600);
    --success-hover: var(--color-emerald-700);

    --warning: var(--color-amber-500);
    --warning-hover: var(--color-amber-600);

    --danger: var(--color-red-600);
    --danger-hover: var(--color-red-700);

    --info: var(--color-sky-600);
    --info-hover: var(--color-sky-700);

    /* states */
    --focus-ring: var(--blue-9);

    /* shadows */
    --shadow-elevation-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-elevation-button: 0 3px 0 var(--color-gray-4);
    --shadow-elevation-soft:
      0 16px 40px -20px rgba(15, 23, 42, 0.24), 0 6px 18px -12px rgba(15, 23, 42, 0.16);
    --shadow-elevation-xl:
      0 24px 64px -28px rgba(15, 23, 42, 0.34), 0 12px 28px -18px rgba(15, 23, 42, 0.2);
    --shadow-elevation-kbd:
      inset 0 -1px 0 color-mix(in srgb, var(--ink) 16%, transparent),
      0 2px 0 var(--line-strong);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --slate-1: #111113;
      --slate-2: #18191b;
      --slate-3: #212225;
      --slate-4: #272a2d;
      --slate-5: #2e3135;
      --slate-6: #363a3f;
      --slate-7: #43484e;
      --slate-8: #5a6169;
      --slate-9: #696e77;
      --slate-10: #777b84;
      --slate-11: #b0b4ba;
      --slate-12: #edeef0;

      --gray-a5: #ffffff1f;

      --blue-1: #09111d;
      --blue-2: #0e1927;
      --blue-3: #0b274a;
      --blue-4: #013067;
      --blue-5: #073c7a;
      --blue-6: #144a8c;
      --blue-7: #1f59a2;
      --blue-8: #256bc2;
      --blue-9: #0080ff;
      --blue-10: #0072f0;
      --blue-11: #76b6ff;
      --blue-12: #cbe3ff;

      --blue-a1: #0012fd0d;
      --blue-a2: #0066fb18;
      --blue-a3: #006cfc3e;
      --blue-a4: #0066fd5d;
      --blue-a5: #0073fe71;
      --blue-a6: #1780ff84;
      --blue-a7: #2886fe9c;
      --blue-a8: #2c8affbe;
      --blue-a9: #0080ff;
      --blue-a10: #0079ffef;
      --blue-a11: #76b6ff;
      --blue-a12: #cbe3ff;

      --blue-contrast: #fff;
      --blue-surface: #0c213d80;
      --blue-indicator: #0080ff;
      --blue-track: #0080ff;

      --success: var(--color-emerald-500);
      --success-hover: var(--color-emerald-400);

      --warning: var(--color-amber-400);
      --warning-hover: var(--color-amber-300);

      --danger: var(--color-red-400);
      --danger-hover: var(--color-red-500);

      --info: var(--color-sky-500);
      --info-hover: var(--color-sky-400);

      --shadow-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
      --shadow-elevation-button: 0 3px 0 var(--color-gray-4);
      --shadow-elevation-soft:
        0 18px 44px -24px rgba(0, 0, 0, 0.78), 0 8px 18px -14px rgba(0, 0, 0, 0.62);
      --shadow-elevation-xl:
        0 28px 72px -28px rgba(0, 0, 0, 0.84), 0 14px 34px -20px rgba(0, 0, 0, 0.68);
      --shadow-elevation-kbd:
        inset 0 -1px 0 color-mix(in srgb, var(--ink-inverse) 32%, transparent),
        0 2px 0 var(--line-strong);
    }
  }

  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) and (prefers-color-scheme: dark) {
      :root {
        --blue-1: oklch(17.8% 0.0278 256.1);
        --blue-2: oklch(20.9% 0.0325 256.1);
        --blue-3: oklch(27.2% 0.074 256.1);
        --blue-4: oklch(31.7% 0.1073 256.1);
        --blue-5: oklch(36.4% 0.1173 256.1);
        --blue-6: oklch(41.3% 0.1224 256.1);
        --blue-7: oklch(46.8% 0.1323 256.1);
        --blue-8: oklch(53.1% 0.1522 256.1);
        --blue-9: oklch(61.5% 0.2108 256.1);
        --blue-10: oklch(57.3% 0.2108 256.1);
        --blue-11: oklch(77% 0.1427 256.1);
        --blue-12: oklch(90.8% 0.0525 256.1);

        --blue-a1: color(display-p3 0 0.0667 0.9882 / 0.047);
        --blue-a2: color(display-p3 0.0235 0.4196 0.9922 / 0.089);
        --blue-a3: color(display-p3 0.102 0.4314 1 / 0.227);
        --blue-a4: color(display-p3 0.0706 0.4078 1 / 0.345);
        --blue-a5: color(display-p3 0.1412 0.4549 1 / 0.425);
        --blue-a6: color(display-p3 0.2157 0.5098 1 / 0.496);
        --blue-a7: color(display-p3 0.2745 0.5412 1 / 0.589);
        --blue-a8: color(display-p3 0.2863 0.5529 1 / 0.719);
        --blue-a9: color(display-p3 0.2196 0.5059 0.9961 / 0.967);
        --blue-a10: color(display-p3 0.2 0.4784 0.9961 / 0.904);
        --blue-a11: color(display-p3 0.5294 0.7255 1 / 0.975);
        --blue-a12: color(display-p3 0.8275 0.898 1 / 0.988);

        --blue-contrast: #fff;
        --blue-surface: color(display-p3 0.0588 0.1176 0.2275 / 0.5);
        --blue-indicator: oklch(61.5% 0.2108 256.1);
        --blue-track: oklch(61.5% 0.2108 256.1);
      }
    }
  }

  html {
    color-scheme: light dark;
    scrollbar-gutter: stable;
  }

  body {
    margin: 0;
    background: var(--surface);
  }

  body[data-scroll-locked] {
    margin-right: 0 !important;
  }
}

@layer utilities {
  .focus-ring {
    @apply outline-none transition-shadow duration-150 ease-out;
    box-shadow: 0 0 0 0 var(--surface), 0 0 0 0 color-mix(in srgb, var(--focus-ring) 0%, transparent);
  }

  [data-focus-source="tab"] .focus-ring:focus {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
  }

  .focus-ring-field {
    @apply outline-none transition-shadow duration-150 ease-out;
    box-shadow: 0 0 0 0 var(--surface), 0 0 0 0 color-mix(in srgb, var(--focus-ring) 0%, transparent);
  }

  .focus-ring-field:focus {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
  }

  .focus-ring-search {
    @apply outline-none transition-colors duration-150 ease-out;
  }

  .focus-ring-search:focus {
    border-color: var(--focus-ring);
  }
}