/* Gooido design tokens. The single source of truth for colour, type, depth,
 * shape and spacing across the whole product.
 *
 * Loaded by:
 *   - public/website/shell.html        the raw-HTML marketing pages
 *   - src/app/globals.css              every React page (Tailwind v4 keeps a
 *                                      url() import verbatim, verified)
 *   - src/components/partner/partner-store.css reads these via :root
 *
 * Two rules keep this file safe to load everywhere at once:
 *
 * 1. It declares ONLY custom properties. No selectors, no resets. Custom
 *    properties inherit and cannot collide, so the unlayered-beats-layered
 *    hazard documented in globals.css never arises here. A reset belongs in
 *    site.css (no Tailwind there) or in globals.css's existing @layer base.
 *
 * 2. Every name is --g- prefixed. site.css, blog.css and customer.css all
 *    read unprefixed --navy, --muted, --line and --turq-deep, and the partner
 *    storefront reads --teal, --dark and --mint. The prefix guarantees this
 *    file changes nothing until a rule opts in.
 */

/* Self-hosted Inter, Noto Serif and Playfair. Absolute public paths, so the
 * raw-HTML pages get real type without the React layout ever running. Remote
 * Google Fonts are banned: they broke the Render build. */
@import url("/fonts/fonts.css");

:root {
  /* ---- Brand ------------------------------------------------------------
   * Two colours, each with one job. A palette looks accidental when the same
   * colour does everything, or when two colours do the same thing.
   *
   * Orange is the brand and the call to action: the Get Started button, the
   * hero CTA, anything asking for a decision. Teal is the accent: links,
   * eyebrows, active states, highlights, and every interactive control inside
   * a storefront. */
  --g-cta: #f7a62b;
  --g-cta-hover: #ef791f;
  --g-cta-ink: #fff;         /* text on the orange */
  /* A tight, low shadow: enough to separate white from orange, not enough to
   * read as a glow. A soft or wide one makes the label look smudged. */
  --g-cta-ink-shadow: 0 1px 1px rgba(120, 60, 0, .32);

  /* The accent is the same orange. The storefront used teal for controls,
   * sliders, checkboxes and active states while the buttons were orange, so
   * one page carried two unrelated signals for "this is interactive". The
   * deep and soft variants are the orange's own, so text on a light
   * background still passes contrast. */
  --g-accent: var(--g-cta);
  --g-accent-hover: var(--g-cta-hover);
  --g-accent-deep: #b35c06;   /* accent as text on a light background */
  --g-accent-soft: #fdf2e2;   /* state and small surfaces only, never a band */
  --g-accent-line: #f6d9ae;

  /* ---- Neutral ramp ---- */
  --g-ink: #17324e;           /* headings */
  --g-ink-deep: #0b2145;      /* dark bands */
  --g-body: #3d5266;          /* body text */
  --g-muted: #6d7b89;         /* labels, captions, metadata */
  --g-faint: #8ea1b0;
  --g-line: #e6ecef;          /* the one hairline. There were six. */
  --g-line-soft: #eef2f4;
  --g-surface: #fff;
  --g-surface-sub: #f7fafb;
  --g-surface-alt: #eef3f5;
  --g-footer-bg: #071b2b;

  /* ---- Semantic. Deliberately NOT collapsed into the accent. ---- */
  --g-star: #fbbc04;
  --g-amber: var(--g-cta);
  --g-amber-ink: #8a5a00;     /* the amber's contrast partner */
  --g-success: #18b986;
  --g-danger: #df504a;
  --g-whatsapp: #25d366;
  --g-line-chat: #06c755;
  --g-link: #0b5cad;          /* a deliberate booking-convention signal */

  /* ---- Type families ---- */
  --g-font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --g-font-serif: "Noto Serif", Georgia, "Times New Roman", serif;

  /* ---- Weights ----------------------------------------------------------
   * Inter and Noto Serif are variable fonts with a wght axis covering
   * 100-900, so every weight below is real, not synthesised. Four steps are
   * deliberate: the old stylesheet used nine (400,700,750,800,850,900,950),
   * which is more emphasis levels than any reader can distinguish. */
  --g-weight-normal: 400;
  --g-weight-medium: 600;
  --g-weight-strong: 700;
  --g-weight-heavy: 800;

  /* ---- Type scale. Ratio 1.2 off 16px, snapped to integers. ----
   * h2 is a fixed 32px, not a clamp. The old clamp(36px,4.5vw,58px) put a
   * 58px heading six times down one page, which is what made the marketing
   * site read as a poster. */
  --g-fs-display: clamp(40px, 4.6vw, 60px);
  --g-fs-h1: clamp(34px, 3.4vw, 44px);
  --g-fs-h2: 32px;
  --g-fs-h3: 22px;
  --g-fs-h4: 18px;
  --g-fs-lead: 19px;
  --g-fs-body: 16px;
  --g-fs-sm: 14px;
  --g-fs-xs: 13px;
  --g-fs-label: 12px;
  --g-fs-stat: 38px;

  /* ---- Depth. Navy-tinted, never black, 3 to 16 percent. ---- */
  --g-shadow-xs: 0 1px 0 rgba(23, 50, 78, .03);
  --g-shadow-sm: 0 2px 8px rgba(23, 50, 78, .06);
  --g-shadow-md: 0 10px 30px rgba(23, 50, 78, .09);
  --g-shadow-lg: 0 18px 45px rgba(23, 50, 78, .125);
  --g-shadow-xl: 0 28px 70px rgba(23, 50, 78, .16);

  /* ---- Shape. Semantic, not decorative. The split between the generous
   * card radii and the tight control radii is intentional: it is component
   * class, not drift, and it must survive. ---- */
  --g-radius-sm: 8px;    /* inputs, chips, search segments */
  --g-radius-md: 15px;   /* nested inside a card */
  --g-radius-lg: 20px;   /* cards, panels */
  --g-radius-xl: 24px;   /* large content blocks */
  --g-radius-2xl: 30px;  /* hero media only */
  --g-radius-pill: 999px;

  /* ---- Spacing. 8px base. ---- */
  --g-sp-1: 8px;
  --g-sp-2: 16px;
  --g-sp-3: 24px;
  --g-sp-4: 40px;
  --g-sp-5: 64px;
  --g-sp-6: 96px;

  /* ---- Layout ---- */
  --g-container: 1200px;
  --g-gutter: 24px;
  --g-header-h: 58px;
  --g-measure: 62ch;     /* cap on any column of running text */
}