/* ==========================================================================
   THRIVOS THEME: the ONE place to change brand colors, fonts, logos and
   light/gradient treatments. Everything else in the site (and the 3D can's
   printed wrap in js/bottle.js) reads these variables.
   Brand kit source files live in assets/brand/source/.
   ========================================================================== */

/* Fonts (Google Fonts): sleek modern serif for display + clean grotesk for text. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&display=swap");

:root {
  /* ---- Core brand colors (from the Thrivos brand kit) ---- */
  --brand-cobalt:      #004aad;  /* Aegean cobalt blue */
  --brand-cobalt-deep: #00337a;
  --brand-cobalt-soft: #e4ecf8;
  --brand-cream:       #f6f4f0;  /* warm off-white */
  --brand-cream-deep:  #eeeae2;
  --brand-ink:         #222222;  /* wordmark / text */
  --brand-sun:         #fbbb4b;  /* golden sun (sampled from sun icon) */
  --brand-sun-deep:    #f4a52a;
  --brand-stone:       #bcbcbc;  /* Ionic column stone */
  --brand-stone-light: #e3e3e3;

  /* ---- Supporting Mediterranean naturals (light accents only) ---- */
  --nat-sea:    #5b9bd5;  /* shallow sea */
  --nat-citrus: #f3cf63;  /* lemon */
  --nat-olive:  #8a9466;  /* olive leaf */
  --nat-clay:   #d9a27e;  /* sunlit terracotta */

  /* ---- Semantic roles ---- */
  --color-bg:          var(--brand-cream);
  --color-bg-alt:      #f1eee8;
  --color-surface:     #ffffff;
  --color-text:        var(--brand-ink);
  --color-text-muted:  #61615e;
  --color-primary:     var(--brand-cobalt);
  --color-primary-hover: var(--brand-cobalt-deep);
  --color-on-primary:  var(--brand-cream);
  --color-accent:      var(--brand-sun-deep);
  --color-accent-soft: var(--brand-sun);
  --color-border:      rgba(34, 34, 34, 0.09);
  --color-focus:       var(--brand-sun-deep);

  /* ---- Soft Mediterranean light (gradients) ---- */
  --light-sun:    radial-gradient(60% 60% at 85% 10%, rgba(251, 187, 75, .28), transparent 70%);
  --light-sea:    radial-gradient(70% 60% at 10% 100%, rgba(91, 155, 213, .22), transparent 70%);
  --light-olive:  radial-gradient(50% 50% at 0% 0%, rgba(138, 148, 102, .16), transparent 70%);
  --light-citrus: radial-gradient(45% 45% at 100% 100%, rgba(243, 207, 99, .22), transparent 70%);
  --grad-cobalt:  radial-gradient(120% 90% at 80% 0%, #1a63c7 0%, var(--brand-cobalt) 45%, var(--brand-cobalt-deep) 100%);
  --grad-dusk:    linear-gradient(180deg, var(--brand-cream) 0%, #f3ede3 100%);

  /* ---- Glass / soft cards ---- */
  --glass-bg:      rgba(255, 255, 255, .62);
  --glass-border:  rgba(255, 255, 255, .7);
  --glass-blur:    18px;
  --glass-on-blue: rgba(246, 244, 240, .08);

  /* ---- Typography ---- */
  --font-display: "Instrument Serif", "DM Serif Display", Georgia, serif;
  --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero:  clamp(3rem, 7.2vw, 6.6rem);
  --fs-h1:    clamp(2.6rem, 5.4vw, 4.8rem);
  --fs-h2:    clamp(2.1rem, 4vw, 3.5rem);
  --fs-h3:    clamp(1.3rem, 1.8vw, 1.55rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --tracking-label: .16em;

  /* ---- Logo / icon files (swap paths here) ---- */
  --logo-ink:    url("../assets/brand/wordmark-ink.png");
  --logo-cream:  url("../assets/brand/wordmark-cream.png");
  --icon-sun:    url("../assets/brand/sun-1.png");
  --icon-column: url("../assets/brand/column-1.png");

  /* ---- Shape, spacing, motion ---- */
  --radius-sm: 10px;
  --radius:    22px;
  --radius-lg: 36px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 18px 48px -24px rgba(0, 51, 122, .28);
  --shadow:      0 30px 70px -30px rgba(0, 51, 122, .40);
  --container: 1240px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(6rem, 13vw, 11rem);
  --ease:      cubic-bezier(.22, .8, .24, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}