/*
 * Dealcora brand tokens — inherited, not invented.
 *
 * Everything between the START/END INHERITED markers is copied verbatim from
 * `dealcora-fleet/src/web/app.css` (:root and its dark block), which in turn carries eden-crm's
 * own values from `packages/ui/src/styles/globals.css`. That file is the source of truth: if a
 * value changes there, change it here, don't diverge.
 *
 * Below the markers are the tokens this marketing site needs and the app does not have — a
 * display type scale, section rhythm, and two accent fills the logo uses but app.css omits in one
 * theme. They are written in the same oklch idiom and each one says why it exists.
 *
 * No @import, no external requests, no JavaScript. Fonts are self-hosted so the stack renders the
 * brand face under a `font-src 'self'` CSP, as the fleet's owner pages run under.
 */

/* Manrope, the brand face (dealcora-fleet app.css --font; eden-crm ui-direction.md §4.2).
   Variable weight 400–800, latin + latin-ext only: the site is English for v1. `display: swap`
   with `size-adjust` keeps the fallback metrically close, so swapping in the webfont does not
   shift layout. OFL licence in ../fonts/OFL.txt. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  size-adjust: 100%;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  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: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  size-adjust: 100%;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  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;
}

/* ───────────────────────── START INHERITED (dealcora-fleet/src/web/app.css) ───────────────── */
:root {
  color-scheme: light;
  --background: oklch(0.94 0.01 87.473);
  --foreground: oklch(0.212 0.004 228.984);
  --muted-foreground: oklch(0.463 0.016 78.152);
  --surface: oklch(0.97 0.007 88.642 / 92%);
  --surface-solid: oklch(0.97 0.007 88.642);
  --surface-2: oklch(0.919 0.014 88.688);
  --border: oklch(0.878 0.018 84.589);
  --edge: oklch(0.35 0.03 70 / 12%);
  --scroll-shadow: oklch(0.35 0.03 70 / 28%);
  --input: oklch(0.592 0.02 81.29);
  --primary: oklch(0.445 0.041 144.855);
  --primary-foreground: oklch(0.98 0.009 84.572);
  --primary-hover: oklch(0.388 0.038 144.805);
  --ink: oklch(0.212 0.004 228.984);
  --ink-foreground: oklch(0.98 0.009 84.572);
  --ring: oklch(0.445 0.041 144.855);
  --rim: oklch(1 0 0 / 70%);
  --destructive: oklch(0.532 0.166 35.262);
  --destructive-subtle: oklch(0.927 0.026 44.715);
  --ok: oklch(0.432 0.086 166.913);
  --ok-subtle: oklch(0.93 0.035 166);
  --warn: oklch(0.47 0.1 75);
  --warn-subtle: oklch(0.94 0.06 90);
  --info-subtle: oklch(0.92 0.03 244);
  --fill-butter: oklch(0.85 0.146 90.493);
  --fill-pine: oklch(0.445 0.041 144.855);
  --fill-tomato: oklch(0.567 0.176 35.445);
  --fill-sky: oklch(0.865 0.037 244.455);
  --elevation-soft: 0 1px 2px oklch(0.35 0.03 70 / 6%), 0 12px 32px -12px oklch(0.35 0.03 70 / 18%);
  --mesh:
    radial-gradient(40% 50% at 12% 8%, oklch(0.9 0.06 50 / 35%), transparent 70%),
    radial-gradient(45% 55% at 88% 20%, oklch(0.9 0.05 140 / 40%), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, oklch(0.93 0.08 92 / 40%), transparent 70%);
  --radius-card: 24px;
  --radius-tile: 20px;
  --radius-input: 14px;
  --gutter: clamp(16px, 1.6vw, 28px);
  --control-height: 40px;
  --font:
    "Manrope", "Onest", "Avenir Next", "Avenir", "Segoe UI Variable Text", "Segoe UI",
    ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: oklch(0.188 0.009 84.574);
    --foreground: oklch(0.95 0.011 84.579);
    --muted-foreground: oklch(0.725 0.022 81.761);
    --surface: oklch(0.228 0.01 80.587 / 94%);
    --surface-solid: oklch(0.228 0.01 80.587);
    --surface-2: oklch(0.275 0.012 78.083);
    --border: oklch(1 0 0 / 10%);
    --edge: oklch(1 0 0 / 9%);
    --scroll-shadow: oklch(0 0 0 / 75%);
    --input: oklch(0.563 0.021 78.142);
    --primary: oklch(0.752 0.05 142.258);
    --primary-foreground: oklch(0.188 0.009 84.574);
    --primary-hover: oklch(0.82 0.04 141.699);
    --ink: oklch(0.95 0.011 84.579);
    --ink-foreground: oklch(0.188 0.009 84.574);
    --ring: oklch(0.752 0.05 142.258);
    --rim: oklch(1 0 0 / 8%);
    --destructive: oklch(0.734 0.13 37.498);
    --destructive-subtle: oklch(0.273 0.045 39.158);
    --ok: oklch(0.78 0.09 166);
    --ok-subtle: oklch(0.28 0.04 166);
    --warn: oklch(0.82 0.12 88);
    --warn-subtle: oklch(0.3 0.05 85);
    --info-subtle: oklch(0.3 0.04 244);
    --fill-butter: oklch(0.817 0.146 89.894);
    --fill-sky: oklch(0.819 0.05 243.705);
    --elevation-soft: 0 1px 2px oklch(0 0 0 / 30%), 0 12px 32px -12px oklch(0 0 0 / 55%);
    --mesh:
      radial-gradient(40% 50% at 12% 8%, oklch(0.32 0.04 50 / 45%), transparent 70%),
      radial-gradient(45% 55% at 88% 20%, oklch(0.3 0.04 140 / 40%), transparent 70%),
      radial-gradient(50% 50% at 50% 100%, oklch(0.3 0.04 80 / 35%), transparent 70%);
  }
}
/* ───────────────────────── END INHERITED ──────────────────────────────────────────────────── */

/*
 * Site additions. New tokens, same idiom, each with a reason.
 */
:root {
  /* --fill-cream and --fill-ink are named in eden-crm's ui-direction.md §4.1 table but have no
     value in app.css, which only needed butter/pine/tomato/sky. A marketing page uses the full
     set of four logo fills as flat blocks, so they get values here, derived from the existing
     surface and ink tokens rather than picked fresh. */
  --fill-cream: oklch(0.97 0.007 88.642);
  --fill-ink: oklch(0.212 0.004 228.984);
  /* Foregrounds tested against each fill. butter/sky/cream take ink, pine/tomato/ink take cream. */
  --on-butter: oklch(0.212 0.004 228.984);
  --on-sky: oklch(0.212 0.004 228.984);
  --on-cream: oklch(0.212 0.004 228.984);
  --on-pine: oklch(0.98 0.009 84.572);
  --on-tomato: oklch(0.98 0.009 84.572);
  --on-ink: oklch(0.98 0.009 84.572);

  /*
   * --fill-tomato (oklch L 0.567) is a mid-tone: measured in Chromium, cream text on it is only
   * 3.56:1 and ink text 3.6:1, so neither foreground reaches WCAG AA. eden-crm's own
   * ui-direction.md §5 requires 4.5:1 for all text on a filled card, so the app's tomato is
   * really a decoration fill, not a text surface. Two derived tokens keep that distinction:
   *
   *   --fill-tomato       unchanged, inherited. Bars, dots, rules — never under text.
   *   --fill-tomato-deep  the same hue and chroma at L 0.47. Cream on it measures 7.0:1, so it
   *                       is the one to use whenever a tomato block carries words.
   *   --text-tomato       tomato as a text or marker colour on the page canvas: 6.3:1 on the
   *                       light canvas, and lifted in dark for 5.8:1 there.
   *
   * Worth raising with whoever owns app.css — the same 3.56:1 applies to a tomato deal card in
   * the CRM.
   */
  --fill-tomato-deep: oklch(0.47 0.176 35.445);
  --on-tomato-deep: oklch(0.98 0.009 84.572);
  --text-tomato: oklch(0.47 0.176 35.445);

  /* The logo's bars, reproduced in CSS, use the logo's own two sets of hexes rather than the
     fill tokens — dealcora-logo-light.svg and -dark.svg differ only in the pine bar and the dot,
     and a CSS copy of the mark should differ in exactly the same way. */
  --logo-butter: #eac860;
  --logo-pine: #3d5e52;
  --logo-tomato: #c24f2e;

  /* The app's type scale tops out at a 40px page title (ui-direction.md §4.2). A landing page
     needs two steps above that. Fluid, so nothing reflows between the two tested widths. */
  --step-display: clamp(2.5rem, 1.1rem + 5.6vw, 4.5rem);
  --step-title: clamp(1.875rem, 1.1rem + 2.6vw, 2.75rem);
  --step-section: clamp(1.5rem, 1.05rem + 1.5vw, 2rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-caption: 0.75rem;

  /* Marketing pages are long; the app's single --gutter does not describe vertical rhythm. */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --measure: 62ch;
  --page-max: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fill-cream: oklch(0.275 0.012 78.083);
    --fill-ink: oklch(0.15 0.008 84.5);
    --on-cream: oklch(0.95 0.011 84.579);
    /* The pine and tomato *fills* deliberately do not change with the theme. A filled block is
       its own background, so what its text needs does not depend on the page behind it, and
       lightening them for dark mode is what broke the contrast in the first place. */
    /* Tomato as text does change: on the near-black canvas it has to come up to clear AA. */
    --text-tomato: oklch(0.67 0.176 35.445);
    --logo-pine: #4e7466;
  }
}