@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@font-face {
  font-family: "App Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-cyrillic-ext-wght-normal.woff2")
    format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "App Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-cyrillic-wght-normal.woff2")
    format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "App Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-vietnamese-wght-normal.woff2")
    format("woff2-variations");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "App Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-latin-ext-wght-normal.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "App Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "App Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-cyrillic-ext-wght-italic.woff2")
    format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "App Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-cyrillic-wght-italic.woff2")
    format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "App Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-vietnamese-wght-italic.woff2")
    format("woff2-variations");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "App Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-latin-ext-wght-italic.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "App Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/montserrat/files/montserrat-latin-wght-italic.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "App Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./assets/fonts/monaspace/monaspace-neon-var-v1.400.woff2") format("woff2-variations");
}

:root {
  --font-header:
    "App Sans", "Montserrat Variable", Montserrat, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-main:
    "App Sans", "Montserrat Variable", Montserrat, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "App Mono", "Monaspace Neon", "SFMono-Regular", Consolas, monospace;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-x: 18px;
  --radius-xl: 24px;
  --motion-fast: 140ms ease;
  --motion-normal: 400ms ease;
  --motion-expressive: 700ms ease;
  --motion-morph: 350ms ease-in-out;
  --motion-morph-stage-delay: 200ms;
  --motion-morph-stage: 200ms ease-in-out;
  --color-island-0: light-dark(rgba(255, 255, 255, 0.64), rgba(24, 22, 20, 0.82));
  --color-island-1: light-dark(rgba(255, 255, 255, 0.58), rgba(30, 28, 26, 0.74));
  --color-island-2: light-dark(rgba(255, 255, 255, 0.52), rgba(36, 34, 32, 0.66));
  --color-island-3: light-dark(rgba(255, 255, 255, 0.46), rgba(42, 40, 38, 0.58));
  --color-island-4: light-dark(rgba(255, 255, 255, 0.40), rgba(48, 46, 44, 0.50));
  --color-outline: light-dark(rgba(21, 30, 46, 0.12), rgba(255, 255, 255, 0.15));
  --color-on-island: light-dark(#12100e, #ffffff);
  --color-on-background: light-dark(#12100e, #ffffff);
  --color-muted: color-mix(in srgb, var(--color-on-background) 56%, transparent);
  --color-primary: #3185fc;
  --color-on-primary: var(--color-on-background);
  --color-secondary: #f96824;
  --color-on-secondary: #12100e;
  --color-warning: #ffe74c;
  --color-on-warning: #12100e;
  --color-success: #12ba85;
  --color-on-success: var(--color-on-background);
  --color-error: #dc2e3c;
  --color-on-error: var(--color-on-background);
  --shadow-island-0: 0 4px 4px rgba(0, 0, 0, 0.10);
  --shadow-island-1: 0 4px 4px rgba(0, 0, 0, 0.24);
  --shadow-island-2: 0 8px 8px rgba(0, 0, 0, 0.32);
  --shadow-island-3: 0 16px 16px rgba(0, 0, 0, 0.38);
  --shadow-island-4: 0 24px 24px rgba(0, 0, 0, 0.42);
  --shadow-bleed-island: 96px;
  --window-glass-tint: light-dark(rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.11));
  --window-noise-opacity: 0.12;
  --window-noise-size: 512px;
  --native-titlebar-height: 30px;
  --native-traffic-light-cluster-width: 60px;
  --native-home-link-left-default: var(--space-4);
  --native-home-link-left-macos: calc(
    var(--native-traffic-light-cluster-width) + var(--native-home-link-left-default)
  );
  color: var(--color-on-island);

  color-scheme: light dark;
  /* Chromium-only today; other engines still get content sizing without smooth intrinsic-size interpolation. */
  interpolate-size: allow-keywords;
  background: transparent;
  font-family: var(--font-main);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --background: light-dark(#ffffff, #12100e);
  --foreground: var(--color-on-background);
  --card: var(--color-island-1);
  --card-foreground: var(--color-on-island);
  --popover: light-dark(#ffffff, #12100e);
  --popover-foreground: var(--color-on-background);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-on-primary);
  --secondary: var(--color-island-2);
  --secondary-foreground: var(--color-on-island);
  --muted: var(--color-island-1);
  --muted-foreground: var(--color-muted);
  --accent: var(--color-island-2);
  --accent-foreground: var(--color-on-island);
  --destructive: var(--color-error);
  --border: var(--color-outline);
  --input: var(--color-outline);
  --ring: var(--color-primary);
  --chart-1: var(--color-primary);
  --chart-2: var(--color-success);
  --chart-3: var(--color-secondary);
  --chart-4: var(--color-warning);
  --chart-5: var(--color-error);
  --radius: 0.625rem;
  --sidebar: var(--color-island-0);
  --sidebar-foreground: var(--color-on-island);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-on-primary);
  --sidebar-accent: var(--color-island-1);
  --sidebar-accent-foreground: var(--color-on-island);
  --sidebar-border: var(--color-outline);
  --sidebar-ring: var(--color-primary);
}

@theme inline {
  --font-sans: var(--font-main);
  --font-mono: var(--font-mono);
  --font-heading:
    var(--font-sans);
  --color-sidebar-ring:
    var(--sidebar-ring);
  --color-sidebar-border:
    var(--sidebar-border);
  --color-sidebar-accent-foreground:
    var(--sidebar-accent-foreground);
  --color-sidebar-accent:
    var(--sidebar-accent);
  --color-sidebar-primary-foreground:
    var(--sidebar-primary-foreground);
  --color-sidebar-primary:
    var(--sidebar-primary);
  --color-sidebar-foreground:
    var(--sidebar-foreground);
  --color-sidebar:
    var(--sidebar);
  --color-chart-5:
    var(--chart-5);
  --color-chart-4:
    var(--chart-4);
  --color-chart-3:
    var(--chart-3);
  --color-chart-2:
    var(--chart-2);
  --color-chart-1:
    var(--chart-1);
  --color-ring:
    var(--ring);
  --color-input:
    var(--input);
  --color-border:
    var(--border);
  --color-destructive:
    var(--destructive);
  --color-accent-foreground:
    var(--accent-foreground);
  --color-accent:
    var(--accent);
  --color-muted-foreground:
    var(--muted-foreground);
  --color-muted:
    var(--muted);
  --color-secondary-foreground:
    var(--secondary-foreground);
  --color-secondary:
    var(--secondary);
  --color-primary-foreground:
    var(--primary-foreground);
  --color-primary:
    var(--primary);
  --color-popover-foreground:
    var(--popover-foreground);
  --color-popover:
    var(--popover);
  --color-card-foreground:
    var(--card-foreground);
  --color-card:
    var(--card);
  --color-foreground:
    var(--foreground);
  --color-background:
    var(--background);
  --radius-sm:
    calc(var(--radius) * 0.6);
  --radius-md:
    calc(var(--radius) * 0.8);
  --radius-lg:
    var(--radius);
  --radius-xl:
    calc(var(--radius) * 1.4);
  --radius-2xl:
    calc(var(--radius) * 1.8);
  --radius-3xl:
    calc(var(--radius) * 2.2);
  --radius-4xl:
    calc(var(--radius) * 2.6);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms ease;
    --motion-normal: 0ms ease;
    --motion-expressive: 0ms ease;
    --motion-morph: 0ms ease-in-out;
    --motion-morph-stage-delay: 0ms;
    --motion-morph-stage: 0ms ease-in-out;
  }
}

@keyframes surface-reveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes route-fade-scale {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes route-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.995);
  }
}

@keyframes task-detail-feed-row-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sidebar-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sidebar-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@layer base {
  * {
    box-sizing: border-box;
    /* Clone box decorations (background, padding, border, shadow) onto every
       line fragment when inline text wraps, instead of splitting them across the
       break. Keeps highlighted/badged inline spans visually intact on each line. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    @apply border-border outline-ring/50;
  }

  html,
  body,
  #root {
    min-width: 320px;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  textarea {
    field-sizing: content;
    resize: none;
    overflow: hidden;
    transition:
      height var(--motion-normal),
      border-color var(--motion-fast),
      box-shadow var(--motion-fast),
      background-color var(--motion-fast);
  }

  button {
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  html[data-platform="macos"] :is(button, a, label, [role="button"], [role="link"], [role="menuitem"], [role="radio"], .cursor-pointer) {
    cursor: default !important;
  }
}

@utility app-region-drag {
  -webkit-app-region: drag;
}

@utility app-region-no-drag {
  -webkit-app-region: no-drag;
}

@utility island-glass {
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-outline);
  background: var(--color-island-0);
  box-shadow: var(--shadow-island-0);
}

@utility island-surface {
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-outline);
  background: var(--island-surface-background, var(--color-island-0));
  box-shadow: var(--island-surface-shadow, var(--shadow-island-0));
}

@utility island-surface-0 {
  backdrop-filter: blur(8px);
  --island-surface-background: var(--color-island-0);
  --island-surface-shadow: var(--shadow-island-0);
}

@utility island-surface-1 {
  --island-surface-background: var(--color-island-1);
  --island-surface-shadow: var(--shadow-island-1);
  backdrop-filter: blur(8px);
}

@utility island-surface-2 {
  --island-surface-background: var(--color-island-2);
  --island-surface-shadow: var(--shadow-island-2);
  backdrop-filter: blur(8px);
}

@utility island-surface-3 {
  --island-surface-background: var(--color-island-3);
  --island-surface-shadow: var(--shadow-island-3);
  backdrop-filter: blur(8px);
}

@utility island-surface-4 {
  --island-surface-background: var(--color-island-4);
  --island-surface-shadow: var(--shadow-island-4);
  backdrop-filter: blur(8px);
}

@utility window-glass-fill {
  position: relative;
  background: var(--window-glass-tint);

  &::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    opacity: var(--window-noise-opacity);
    /* background-image: url("./assets/acrylic-noise.svg"); */
    background-repeat: repeat;
    background-size: var(--window-noise-size) var(--window-noise-size);
    mix-blend-mode: soft-light;
  }
}

@utility contain-strict {
  contain: strict;
}

@utility hide-scrollbar {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.app-sidebar-panel {
  will-change: opacity, transform, max-width;
}

.app-sidebar-panel-overlay {
  animation: sidebar-slide-in var(--motion-fast) both;
}

.app-sidebar-panel-shift {
  animation: sidebar-slide-in var(--motion-fast) both;
}

.app-sidebar-panel-closing {
  animation: sidebar-slide-out var(--motion-fast) both;
}

.task-detail-island-stack {
  container-type: inline-size;
}

@container (min-width: 720px) {
  .task-detail-body-split {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  }
}

.floating-notice-collapsed-danger {
  background: var(--color-error);
}

.floating-notice-collapsed-neutral {
  background: var(--color-island-2);
}

@media (prefers-reduced-motion: no-preference) {
  .floating-notice-morph {
    contain: layout paint;
    transform-origin: right bottom;
    transition:
      width var(--motion-morph),
      height var(--motion-morph),
      min-height var(--motion-morph),
      max-height var(--motion-morph),
      grid-template-rows var(--motion-morph),
      padding var(--motion-morph),
      background-color var(--motion-morph),
      border-radius var(--motion-morph),
      bottom var(--motion-fast);
  }

  .floating-notice-content,
  .floating-notice-collapsed-button {
    transition: opacity var(--motion-fast);
  }

  .route-transition-frame {
    animation: route-fade-scale var(--motion-fast) both;
    transform-origin: center;
  }

  .task-detail-feed-row {
    animation: task-detail-feed-row-enter var(--motion-normal) both;
    transform-origin: top center;
  }

  .view-transition-route::view-transition-old(root) {
    animation: route-fade-out var(--motion-fast) both;
  }

  .view-transition-route::view-transition-new(root) {
    animation: route-fade-scale var(--motion-fast) both;
  }
}
