/* Design tokens for windreserve.de.
 *
 * Deliberately the same visual family as the windee platform (~/DEV/windee):
 * a warm off-white ground with white surfaces layered on it, full colour ramps
 * rather than a handful of flat values, a radius scale, a shadow scale, Inter,
 * and short transitions. The previous direction was flat, square and ruled --
 * an engineering-document look that read as dated rather than as a modern
 * service business.
 *
 * The green is WindReserve's own #00A35E, sampled from the logo file, not
 * windee's #01ae70 -- the two are close, and each brand keeps its own.
 *
 * Nothing here paints a pixel. Light palette on :root, dark palette overriding
 * the same names under prefers-color-scheme.
 */

:root {
  color-scheme: light dark;

  /* --- Brand ------------------------------------------------------------ */
  --brand-green: #00a35e;
  --brand-black: #191919;

  /* Green ramp built around the brand value at 500. Tints for washes and hover
     grounds, shades for text on light surfaces where the brand value itself is
     too light to pass AA. */
  --green-50: #e8f8f0;
  --green-300: #55c998;
  --green-400: #1eb87b;
  --green-500: var(--brand-green);
  --green-700: #006b3e;

  /* Neutral ramp, warmed slightly so it sits on the paper ground rather than
     going blue against it. */
  --gray-50: #faf8f5;
  --gray-200: #e5e0d7;
  --gray-300: #d0c9bd;
  /* Measured 4.33:1 on the paper ground at its previous #7c7466 -- just under
     AA, and it is the colour every footer label and section eyebrow uses. */
  --gray-500: #706a5c;
  --gray-600: #5c554a;
  --gray-900: var(--brand-black);

  /* --- Semantic surfaces ------------------------------------------------ */
  --color-ground: #fff6ef;        /* the page itself; windee's warm secondary */
  --color-surface: #ffffff;       /* cards and panels sitting on the ground */
  --color-surface-sunk: var(--gray-50);
  --color-ink: var(--gray-900);
  --color-ink-soft: var(--gray-600);
  --color-ink-faint: var(--gray-500);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-accent: var(--green-500);
  --color-accent-wash: var(--green-50);
  /* Text on a filled accent surface. Dark, not white: white on the brand green
     measures 3.28:1 and fails AA, whereas the brand black on it is 5.36:1 --
     so the button keeps the real brand colour instead of darkening it. */
  --color-accent-text: var(--green-700);
  /* Ink for type sitting ON the brand green. Black, not white: white on
     #00a35e is about 3.3:1 and fails AA for anything but large text, while
     the brand black is 5.4:1 and passes everywhere. */
  --color-accent-ink: var(--brand-black);  /* green as text on a light surface */

  /* Inverted band for the closing call to action. Fixed in both schemes so the
     band reads the same either way. */
  --color-invert-bg: #14150f;
  --color-invert-ink: #f6f3ee;
  /* Body copy set over a photograph. Dimmer than the heading, but a literal
     value rather than a translucent one: alpha over imagery makes the effective
     contrast depend on whatever pixel happens to be underneath. */
  --color-invert-ink-body: #e4dfd6;


  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Marketing pages want a larger base than the windee app's 14px. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 1.2rem + 3vw, 3rem);
  --text-3xl: clamp(2.4rem, 1.4rem + 4.2vw, 4.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.32;
  --leading-normal: 1.55;

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.021em;   /* Inter wants negative tracking at display sizes */
  --tracking-wide: 0.02em;

  /* --- Space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* --- Elevation ---------------------------------------------------------
     Warm-tinted rather than neutral black, so a raised card does not go grey
     against the paper ground. */
  --shadow-sm: 0 1px 2px rgba(48, 40, 28, 0.06);
  --shadow-lg: 0 4px 8px rgba(48, 40, 28, 0.06), 0 12px 28px rgba(48, 40, 28, 0.08);

  /* --- Motion ------------------------------------------------------------ */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  /* For entrances only. Long enough to read as deliberate rather than as a
     transition that fired late; animations.css is its only consumer. */
  --motion-slow: 520ms;

  /* How far past its frame a full-bleed photograph is drawn, giving the
     parallax somewhere to travel without exposing an edge. Shared by
     sections-hero.css and animations.css, which must agree or the image jumps
     the moment script takes over. */
  --hero-overscan: 1.12;
  --ease: cubic-bezier(0.2, 0, 0.15, 1);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 76rem;
  --container-pad: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ground: #14150f;
    --color-surface: #1e1f18;
    --color-surface-sunk: #191a13;
    --color-ink: #f6f3ee;
    --color-ink-soft: #b9b3a6;
    --color-ink-faint: #8d877b;
    --color-border: #2f3128;
    --color-border-strong: #3d4034;

    /* The brand value is dark enough that white text on it still passes AA, but
       as text on the dark ground it has to be lifted. */
    --color-accent: var(--green-400);
    --color-accent-wash: rgba(30, 184, 123, 0.12);
    --color-accent-text: var(--green-300);


    /* Shadows read as almost nothing on a dark ground -- depth comes from the
       surface being lighter than the page instead. Kept, quietly, for the
       raised states where a hint still helps. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}