/* ─────────────────────────────────────────────────────────────────────
 * S.O.T. Corporate Identity — design tokens
 * Source of truth: assets/tokens.css (CI handoff v1.0, April 2026).
 * Do not invent values here. Every chrome surface across every SOT
 * site (Stays, Students, Services, Sales, Sounds, Startups, SOTCoin,
 * Sites, Saude, Soulmates, Shop, …) reads from this file.
 *
 * Spec: S.O.T. WordPress Theme — Claude Code Handoff.md
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Ink scale ───────────────────────────────────────────────────── */
  --ink:           #0F1F24;
  --ink-2:         #2B3D44;
  --ink-3:         #546870;
  --ink-4:         #8B9CA3;

  /* ── Paper scale ─────────────────────────────────────────────────── */
  --paper:         #FBF8F2;
  --paper-2:       #F3EFE6;
  --paper-3:       #E7E0D2;
  --line:          #DDD3BE;

  /* ── Brand anchors ───────────────────────────────────────────────── */
  --ocean:         #0A4D6E;
  --ocean-deep:    #063349;
  --ocean-soft:    #D3E3EC;
  --forest:        #1F5A36;
  --forest-deep:   #133A22;
  --forest-soft:   #DCE8DE;

  /* ── Marketing accents — flyers/social only, never product chrome ── */
  --accent-sunset: #D86B3C;
  --accent-coral:  #C84B4B;
  --accent-sand:   #E5C68A;
  --accent-sky:    #7CC4D8;

  /* ── Functional ──────────────────────────────────────────────────── */
  --success:       var(--forest);
  --warn:          #B86A1A;
  --error:         #A8311F;

  /* ── Typography stack ────────────────────────────────────────────── */
  --glamore: "Glamore", "DM Serif Display", Georgia, serif;
  --serif:   "Fraunces", "DM Serif Display", Georgia, serif;
  --sans:    "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii (locked to 4-step scale) ──────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* ── Shadows (locked to 2-step scale) ────────────────────────────── */
  --shadow-card:  0 1px 2px rgba(15,31,36,.04), 0 8px 24px -12px rgba(15,31,36,.12);
  --shadow-float: 0 24px 48px -16px rgba(15,31,36,.22);

  /* ── Brand anchor (per-site override, points to ocean or forest) ──
     Per-site Brand Settings flips this to var(--forest) when the site
     leans nature/health/eco. Default: ocean. */
  --brand:           var(--ocean);
  --brand-deep:      var(--ocean-deep);
  --brand-soft:      var(--ocean-soft);

  /* ── Layout (kept from existing theme; not chrome) ───────────────── */
  --stot-header-height:      150px;
  --stot-header-row1-height: 75px;
  --stot-header-row2-height: 75px;
  --stot-shell-max:          1280px;
  --stot-bottom-nav-height:  0px;
  --stot-touch-min:          44px;

  /* ── Wordmark sizing (driven from Brand Settings, defaults here) ── */
  --stot-brand-mark-size:        2.2rem;
  --stot-brand-mark-size-mobile: 1.75rem;
  --stot-brand-tag-size:         0.85rem;
  --stot-brand-tag-size-mobile:  0.7rem;

  /* ─────────────────────────────────────────────────────────────────
   * Legacy compatibility re-point.
   *
   * Existing rules across system.css + plugin override partials read
   * --stot-color-* and --stot-radius-* / --stot-shadow-*. Re-pointing
   * them here lets the entire site repaint at the new tokens without
   * a selector-by-selector edit. This block gets DELETED at the end
   * of the four-week token sweep (CI handoff Section 10, week 4).
   * ─────────────────────────────────────────────────────────────── */
  --stot-color-bg:           var(--paper);
  --stot-color-surface:      rgba(251, 248, 242, 0.92);
  --stot-color-surface-solid:#FFFFFF;
  --stot-color-panel:        var(--ocean-soft);
  --stot-color-text:         var(--ink);
  --stot-color-muted:        var(--ink-3);
  --stot-color-brand:        var(--ocean);
  --stot-color-brand-strong: var(--ocean-deep);
  --stot-color-brand-soft:   var(--ocean-soft);
  --stot-color-accent:       var(--accent-coral); /* never use in chrome */
  --stot-color-border:       var(--line);
  --stot-color-border-strong:var(--ink-4);
  --stot-color-dark:         var(--ocean-deep);
  --stot-radius-sm:          var(--r-sm);
  --stot-radius:             var(--r-md);
  --stot-radius-lg:          var(--r-lg);
  --stot-shadow:             var(--shadow-float);
  --stot-shadow-soft:        var(--shadow-card);
  --stot-font-heading:       var(--serif);
  --stot-font-body:          var(--sans);
}

/* ── Forest-anchor variant ────────────────────────────────────────────
   When a site is registered as a "Forest" anchor (Saude, Sounds, etc.)
   the body class .stot-anchor--forest flips --brand to forest.
   ─────────────────────────────────────────────────────────────────── */
body.stot-anchor--forest {
  --brand:        var(--forest);
  --brand-deep:   var(--forest-deep);
  --brand-soft:   var(--forest-soft);
  --stot-color-brand:        var(--forest);
  --stot-color-brand-strong: var(--forest-deep);
  --stot-color-brand-soft:   var(--forest-soft);
}

/* ── Self-hosted display + body fonts ─────────────────────────────────
   Glamore TTF/OTF already present (theme/assets/fonts/glamore.ttf).
   Fraunces + Inter Tight are FOLLOW-UP — drop the woff2 files in
   assets/fonts/ and they will be picked up automatically.
   ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces[wght].woff2') format('woff2-variations'),
       url('../fonts/Fraunces-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight[wght].woff2') format('woff2-variations'),
       url('../fonts/InterTight-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}