/**
 * FOXXI brand design tokens.
 *
 * Typography: keeps the existing theme fonts (TeX Gyre Adventor Bold for
 * headings, Nunito Sans for body) so fogászat visually matches fogszab.
 * No Google Fonts import — theme already loads its own fonts.
 *
 * What this file contributes:
 *   - The official 7-color brand palette (--foxxi-*) as CSS variables
 *   - Ink scale, radius/shadow tokens, easing for use in theme-fox overrides
 */

:root {
  /* Brand palette (docs/foxxi_szinek.txt) */
  --foxxi-brown:      #42291c;
  --foxxi-cypress:    #f6ac6e;
  --foxxi-maple:      #e37f56;
  --foxxi-orange:     #d75c20;
  --foxxi-cherry:     #c97849;
  --foxxi-oak:        #9b413a;
  --foxxi-eucalyptus: #703e2a;

  /* Section background tokens */
  --foxxi-cream:      #faf3eb;
  --foxxi-sand:       #fff5ec;

  /* Ink (text) scale */
  --ink-900: #2a1a10;
  --ink-700: #5a4538;
  --ink-500: #8a7669;
  --ink-300: #c8b9ad;

  /* Type system — match the existing theme fonts (already loaded by theme).
   * Heading: TeX Gyre Adventor Bold. Body: Nunito Sans. NO Fraunces, no italic. */
  --display: "TeX Gyre Adventor Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Nunito Sans 10pt Regular", "Nunito Sans", system-ui, -apple-system, sans-serif;
  /* Legacy aliases used elsewhere in this stylesheet — point to display font */
  --serif: var(--display);

  /* Geometry */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 28px;

  /* Shadow ladder (warm brown tint) */
  --shadow-sm: 0 2px 6px rgba(66, 41, 28, 0.06), 0 1px 2px rgba(66, 41, 28, 0.04);
  --shadow:    0 12px 30px rgba(66, 41, 28, 0.10), 0 4px 10px rgba(66, 41, 28, 0.06);
  --shadow-lg: 0 28px 60px rgba(66, 41, 28, 0.18), 0 10px 24px rgba(66, 41, 28, 0.10);

  /* Spatial rhythm */
  --section-pad: clamp(72px, 9vw, 128px);
  --container-w: 1240px;

  /* Motion */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Foxxi Dental Mint palette — fogászat (theme-fox) színváltása narancsról
   * türkiz/zöldre, hogy vizuálisan más legyen mint a fogszab (theme-ortho).
   * 2026-04-30: user explicit request. */
  --fox-mint-50:   #f3faf7;   /* very light mint — page bg accent */
  --fox-mint-100:  #dff1ea;   /* light mint — section bg */
  --fox-mint-200:  #c5e8de;   /* mid-light mint — hover bg */
  --fox-mint-300:  #a3d9ca;   /* light teal — soft accent */
  --fox-mint-400:  #7dc8b0;   /* mid teal — links */
  --fox-mint-500:  #5fbfa3;   /* primary teal — buttons */
  --fox-mint-600:  #48a999;   /* mid-dark teal — button hover */
  --fox-mint-700:  #2c8378;   /* dark teal — headings, dark text */
  --fox-mint-800:  #1f6e62;   /* eucalyptus green — footer */
  --fox-mint-900:  #154e46;   /* deepest green — accents */

  /* Fox semantic tokens (now mint-based) */
  --fox-primary:    var(--fox-mint-500);
  --fox-primary-dk: var(--fox-mint-700);
  --fox-accent:     var(--fox-mint-400);
  --fox-light:      var(--fox-mint-100);
  --fox-deep:       var(--fox-mint-800);
}

/* Fox section semantic remapping */
body.theme-fox {
  --brand-primary:    var(--fox-primary);
  --brand-primary-dk: var(--fox-primary-dk);
  --brand-accent:     var(--fox-accent);
  --brand-light:      var(--fox-light);
  --brand-deep:       var(--fox-deep);
}