/* base.css — reset + design tokens + typography
   Extracted from the compiled Tailwind build of myotto.ai (Otto landing page).
   Layer order matches platform/ui: reset, base, layout, components, utilities. */

@layer reset, base, layout, components, utilities;

/* ---------------------------------------------------------------- fonts */
/* Inter ships as 7 unicode-range subsets of a variable font (weights 300–600). */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/83afe278b6a6bb3c.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304,
    U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; /* latin */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/1bffadaabf893a1e.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, 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; /* latin-ext */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/2c55a0e60120577a.woff2) format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F; /* cyrillic-ext */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/9c72aa0f40e4eef8.woff2) format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; /* cyrillic */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/5476f68d60460930.woff2) format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1,
    U+3A3-3FF; /* greek */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/2bbe8d2671613f1f.woff2) format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1,
    U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9,
    U+20AB; /* vietnamese */
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/ad66f9afd8947f86.woff2) format("woff2");
  unicode-range: U+1F??; /* emoji/symbols */
}
@font-face {
  font-family: "Inter Fallback";
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ---------------------------------------------------------------- reset */

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    background: none;
  }

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

  ul,
  ol {
    list-style: none;
  }
}

/* ---------------------------------------------------------------- tokens */

@layer base {
  :root {
    /* palette — light (landing) */
    --color-background: #fafafa;
    --color-foreground: #171717;
    --color-muted: #5c5c5c;
    --color-border: #e0e0e0;
    --color-border-strong: #d4d4d4;
    --color-surface: #ffffff;
    --color-surface-hover: #f0f0f0;
    --color-white: #fff;
    --color-black: #000;
    --color-emerald-400: #00d294;
    --color-emerald-600: #009767;

    /* palette — dark (presale/status surfaces) */
    --dark-bg: #000;
    --dark-fg: #f5f5f7;
    --dark-fg-dim: #a1a1a6;
    --dark-fg-faint: #6e6e73;
    --dark-fg-ghost: #48484a;
    --dark-surface-border: #ffffff12;

    /* typography */
    --font-sans: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-body-sm: 0.875rem;
    --text-body-md: 1.0625rem;
    --text-body-lg: 1.25rem;
    --text-h2: 22px;
    --text-hero: 38px;
    --text-hero-md: 54px;

    --leading-tight: 1.05;
    --leading-heading: 1.15;
    --leading-body: 1.65;

    --tracking-display: -0.05em;
    --tracking-body: -0.02em;
    --tracking-widest: 0.1em;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* spacing & sizing (Tailwind base unit) */
    --spacing: 0.25rem;
    --container-max: calc(var(--spacing) * 260); /* 65rem site column */

    /* radii */
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --radius-full: 9999px;

    /* effects */
    --shadow-button: 0 1px 2px #0000000f;
    --blur-md: 12px;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 100ms;
    --duration-base: 150ms;
    --duration-slow: 200ms;
  }

  /* Dark palette — follows the OS scheme by default; an explicit
     data-theme attribute (footer switcher) overrides it either way.
     Values shared with platform/ui. */
  :root[data-theme="dark"] {
    --color-background: #0a0a0a;
    --color-foreground: #ededed;
    --color-muted: #a1a1aa;
    --color-border: #27272a;
    --color-border-strong: #3f3f46;
    --color-surface: #111111;
    --color-surface-hover: #1c1c1e;
    --shadow-button: 0 1px 2px #00000066;
    color-scheme: dark;
  }

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

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-background: #0a0a0a;
      --color-foreground: #ededed;
      --color-muted: #a1a1aa;
      --color-border: #27272a;
      --color-border-strong: #3f3f46;
      --color-surface: #111111;
      --color-surface-hover: #1c1c1e;
      --shadow-button: 0 1px 2px #00000066;
    }
  }

  html {
    font-family: var(--font-sans);
    color-scheme: light dark;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow-x: hidden;
  }

  code,
  pre,
  kbd,
  samp {
    font-family: var(--font-mono);
  }
}