/* 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;

/* Mono face — JetBrains Mono (eyebrows, code, meta strip). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------- 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) — warm neutral canvas (hue 95, near-zero
       chroma) with white cards; Fonderie's molten accent at hue 45. Values
       shared with the YC-rebrand deck so landing + subpages stay in sync. */
    --color-background: oklch(98.5% 0.002 95); /* warm near-white canvas */
    --color-foreground: oklch(21% 0.006 95);   /* ink */
    --color-muted: oklch(46% 0.01 95);         /* secondary text */
    --color-muted-light: oklch(60% 0.01 95);   /* tertiary / labels */
    --color-muted-faint: oklch(80% 0.01 95);   /* faint step numbers */
    --color-border: oklch(90% 0.004 95);
    --color-border-strong: oklch(84% 0.005 95);
    --color-surface: oklch(100% 0 0);          /* white cards */
    --color-surface-hover: oklch(96% 0.002 95);
    --color-surface-alt: oklch(96% 0.002 95);
    --color-nav-bg: oklch(98.5% 0.002 95 / 0.85);
    --color-white: #fff;
    --color-black: #000;
    --color-accent: oklch(56% 0.15 45);          /* molten metal pour */
    --color-emerald-400: var(--color-accent);    /* legacy alias (accent fill) */
    --color-emerald-600: var(--color-accent);    /* legacy alias (accent text) */
    --color-gold: #c9a96e;        /* Fonderie secondary accent */

    /* semantic palette (Wise) — status only, never the brand CTA */
    --color-positive: #2ead4b;
    --color-positive-deep: #054d28;
    --color-warning: #ffd11a;
    --color-negative: #d03238;
    --color-negative-deep: #a72027;

    /* 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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
      Consolas, "Liberation Mono", "Courier New", monospace;
    /* Otto uses Inter for everything — display is Inter semibold, not a
       separate face. Kept as a token so component rules need no changes. */
    --font-display: var(--font-sans);
    --weight-display: 600;

    --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: 1040px; /* YC-rebrand 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;
    --radius-card: 1.5rem; /* 24px — Wise canonical card + button radius */

    /* 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: oklch(17% 0.004 95);
    --color-foreground: oklch(94% 0.003 95);
    --color-muted: oklch(68% 0.01 95);
    --color-muted-light: oklch(58% 0.01 95);
    --color-muted-faint: oklch(42% 0.01 95);
    --color-border: oklch(30% 0.006 95);
    --color-border-strong: oklch(36% 0.007 95);
    --color-surface: oklch(21% 0.005 95);
    --color-surface-hover: oklch(24% 0.005 95);
    --color-surface-alt: oklch(24% 0.005 95);
    --color-nav-bg: oklch(17% 0.004 95 / 0.85);
    --color-accent: oklch(68% 0.16 45);
    --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: oklch(17% 0.004 95);
      --color-foreground: oklch(94% 0.003 95);
      --color-muted: oklch(68% 0.01 95);
      --color-muted-light: oklch(58% 0.01 95);
      --color-muted-faint: oklch(42% 0.01 95);
      --color-border: oklch(30% 0.006 95);
      --color-border-strong: oklch(36% 0.007 95);
      --color-surface: oklch(21% 0.005 95);
      --color-surface-hover: oklch(24% 0.005 95);
      --color-surface-alt: oklch(24% 0.005 95);
      --color-nav-bg: oklch(17% 0.004 95 / 0.85);
      --color-accent: oklch(68% 0.16 45);
      --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);
  }
}

/* ---------------------------------------------------------------- reveal */
/* Scroll-triggered entrance — landing.js toggles [data-shown] as each
   element scrolls into view (IntersectionObserver). Unlayered so it wins
   over component animations. */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

[data-reveal][data-shown] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}