/*
 * 00-tokens.css
 * Design tokens for divi-sales-child (godindev.com)
 * Brand colors match godin.com (Section 1 of the Strategic Plan). Typography, neutrals,
 * and scale decisions made deliberately for godindev.com — see design-system.md for rationale.
 * These decisions are candidates to port back into godin.com's 00-tokens.css later.
 */

:root {
  /* Core brand palette — matches godin.com exactly */
  --gdi-teal-dark:    #0d5c63;
  --gdi-teal-mid:      #0e8c96;
  --gdi-teal-light:    #7ecfd4;
  --gdi-amber:         #c17f24;
  --gdi-amber-light:   #e0a84d;

  /* Neutrals — true gray (deliberately not teal-tinted; better legibility at body-text sizes) */
  --gdi-gray-900: #1a1a1a;
  --gdi-gray-600: #444444;
  --gdi-gray-400: #777777;
  --gdi-gray-200: #dddddd;
  --gdi-gray-100: #f4f4f4;
  --gdi-white:    #ffffff;

  /* Semantic aliases — reference these in modules, not the raw values above */
  --gdi-color-primary:      var(--gdi-teal-dark);
  --gdi-color-accent:       var(--gdi-amber);
  --gdi-color-accent-light: var(--gdi-amber-light);
  --gdi-color-link:         var(--gdi-teal-mid);
  --gdi-color-link-hover:   var(--gdi-teal-dark);
  --gdi-color-text:         var(--gdi-gray-900);
  --gdi-color-text-secondary: var(--gdi-gray-600);
  --gdi-color-text-muted:   var(--gdi-gray-400);
  --gdi-color-border:       var(--gdi-gray-200);
  --gdi-color-bg:           var(--gdi-white);
  --gdi-color-bg-alt:       var(--gdi-gray-100);
  --gdi-color-page-bg:      color-mix(in srgb, var(--gdi-teal-light) 15%, white);
  --gdi-color-boxed-bg:     color-mix(in srgb, var(--gdi-teal-light) 5%, white);
  --gdi-color-content-bg:   color-mix(in srgb, var(--gdi-teal-light) 45%, white);
  --gdi-color-content-frame: color-mix(in srgb, var(--gdi-teal-mid) 60%, white);
  --gdi-color-card-border:  color-mix(in srgb, var(--gdi-teal-light) 70%, white);
  --gdi-color-footer-bg:    var(--gdi-teal-dark);
  --gdi-color-footer-text:  var(--gdi-white);

  /* Header/footer brand gradient — one shared teal progression (light to
     dark), applied with the direction/range each element's own content
     needs, not literally identical CSS. Verified against actual pixel-
     sampled content, not eyeballed:
     - Header: the "GLi" wordmark is itself a dark navy-teal (~rgb(5,62,97),
       essentially --gdi-teal-dark), so it needs to sit on the *light* end
       (--gdi-teal-light gives ~6.3:1 contrast against it). The nav row has
       its own opaque light strip already, independent of this gradient, so
       only the logo's corner matters here — hence a horizontal sweep with
       light on the left, where the logo sits.
     - Footer: heading + copyright are white text, both #fff. --gdi-teal-dark
       gives white text ~7.7:1 contrast; --gdi-teal-light would give white
       text only ~1.8:1 (fails badly) — so the footer gradient must never
       reach the light end at all. It stays inside the safe dark range,
       vertically, from --gdi-color-footer-bg down to a still-dark
       teal-mid/footer-bg blend (~5.2:1, still comfortably AA-safe). */
  --gdi-gradient-header: linear-gradient(90deg, var(--gdi-teal-light) 0%, var(--gdi-teal-dark) 100%);
  --gdi-gradient-footer: linear-gradient(180deg, var(--gdi-color-footer-bg) 0%, color-mix(in srgb, var(--gdi-teal-mid) 60%, var(--gdi-color-footer-bg) 40%) 100%);

  /* Typography — single family (Inter), weight/size carry the hierarchy, not a font pairing */
  --gdi-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gdi-font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gdi-font-mono:    'Courier New', monospace;
  /* Deliberately separate from heading/body — reserved for expressive one-off
     moments only (the header tagline, possibly a future pull-quote/testimonial).
     Never use for body copy or headings. */
  --gdi-font-accent:  'Newsreader', serif;

  --gdi-weight-heading: 700;
  --gdi-weight-body:    400;

  /* Type scale — 7 steps, matches godin.com's range so the two sites share a rhythm */
  --gdi-text-xs:   0.75rem;
  --gdi-text-sm:   0.875rem;
  --gdi-text-base: 1rem;
  --gdi-text-lg:   1.25rem;
  --gdi-text-xl:   1.75rem;
  --gdi-text-2xl:  2.5rem;
  --gdi-text-3xl:  3rem;

  /* Spacing — 6 steps */
  --gdi-space-2xs: 0.25rem;
  --gdi-space-xs:  0.5rem;
  --gdi-space-sm:  1rem;
  --gdi-space-md:  2rem;
  --gdi-space-lg:  4rem;
  --gdi-space-2xl: 6rem;

  /* Layout / shape / motion — matches godin.com's mechanical values */
  /* Must also be manually kept in sync with Divi's Theme Customizer →
     Layout Settings → Website Content Width field — that Customizer
     field doesn't support CSS variable references. */
  --gdi-max-width: 1200px;
  --gdi-radius-sm: 4px;
  --gdi-radius-md: 8px;
  --gdi-radius-lg: 16px;
  --gdi-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --gdi-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --gdi-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --gdi-transition: all 0.2s ease-in-out;

  /* Breakpoints (reference only) */
  --gdi-bp-tablet: 980px;
  --gdi-bp-phone:  767px;
}

/* Responsive type scale-down, matches Divi's own breakpoints */
@media (max-width: 980px) {
  :root {
    --gdi-text-3xl: 2.25rem;
    --gdi-text-2xl: 2rem;
    --gdi-text-xl:  1.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --gdi-text-3xl: 1.85rem;
    --gdi-text-2xl: 1.65rem;
    --gdi-text-xl:  1.35rem;
  }
}