/*
 * Tabsamo Group — Brand Palette
 * 2026-05-12
 *
 * Voice: confident, modern, ambitious. Founder umbrella, not SaaS.
 * Family: shares typographic DNA with eHR, Baacil, Saakuut. Distinct color story.
 *
 * Usage: drop on :root of the Astro app (or any HTML host).
 * Tailwind: map these tokens into theme.extend.colors with the `c-` prefix preserved.
 */

:root {
  /* ─── Primary · Electric Indigo (the Tabsamo signature) ─────────────── */
  --c-tabsamo-blue:        #2A4FE0;  /* Primary brand. Indigo-leaning, premium */
  --c-tabsamo-blue-deep:   #1A3399;  /* Pressed / deep CTA / heading on paper */
  --c-tabsamo-blue-soft:   #6B85F0;  /* Hover wash, decorative tint */
  --c-tabsamo-blue-faint:  #E7ECFB;  /* Background wash, badge ground */

  /* ─── Ink · Cool near-black ────────────────────────────────────────── */
  --c-ink:                 #0F1419;  /* Display ink. Cooler than eHR's warm ink */
  --c-ink-soft:            #2A3340;  /* Body text on paper */
  --c-ink-mute:            #6B7585;  /* Metadata, captions, footnotes */
  --c-ink-trace:           #A3ABB8;  /* Disabled, placeholder */

  /* ─── Paper · Cool whites ─────────────────────────────────────────── */
  --c-paper:               #FDFDFE;  /* Primary canvas */
  --c-paper-cool:          #F7F9FB;  /* Secondary surface, cards */
  --c-paper-deep:          #ECF0F4;  /* Dividers, recessed wells */
  --c-stone:               #D6DCE5;  /* Borders, hairlines */
  --c-stone-deep:          #B5BFCC;  /* Strong dividers */

  /* ─── Accent · Brass (founder-letter / official seal) ──────────────── */
  --c-brass:               #B68B4A;  /* Primary accent — premium, seal-like */
  --c-brass-deep:          #856232;  /* Hover / pressed brass */
  --c-brass-soft:          #D9B987;  /* Soft brass wash */

  /* ─── Tertiary · Emerald (success / "active venture" tag) ─────────── */
  --c-emerald:             #2E7D5B;  /* Live venture indicator, success */
  --c-emerald-deep:        #1A4D38;
  --c-emerald-soft:        #B5D6C5;

  /* ─── Status (subsidiary lifecycle) ────────────────────────────────── */
  --c-status-active:       #2E7D5B;  /* Venture is live (eHR, eHel, Baacil) */
  --c-status-incubating:   #B68B4A;  /* In incubation (CPD, Hubaal) */
  --c-status-planned:      #6B7585;  /* Roadmap (future verticals) */
  --c-status-paused:       #A85A3C;  /* Paused (Hubaal pre-revival) */

  /* ─── Surface elevations ──────────────────────────────────────────── */
  --c-surface-1:           var(--c-paper);
  --c-surface-2:           var(--c-paper-cool);
  --c-surface-3:           var(--c-paper-deep);
  --c-surface-elevated:    #FFFFFF;   /* True white for popovers, modals */

  /* ─── Reverse-out (dark mode hero / VC-deck slide) ─────────────────── */
  --c-reverse-bg:          #0F1419;
  --c-reverse-bg-soft:     #1A2230;
  --c-reverse-text:        #ECF0F4;
  --c-reverse-text-soft:   #A3ABB8;
  --c-reverse-rule:        #2A3340;

  /* ─── Shadows ─────────────────────────────────────────────────────── */
  --shadow-card:           0 1px 2px rgba(15, 20, 25, 0.04), 0 4px 12px rgba(15, 20, 25, 0.06);
  --shadow-card-hover:     0 2px 4px rgba(15, 20, 25, 0.06), 0 8px 24px rgba(15, 20, 25, 0.10);
  --shadow-elevated:       0 4px 8px rgba(15, 20, 25, 0.08), 0 16px 48px rgba(15, 20, 25, 0.12);

  /* ─── Rhythm tokens ───────────────────────────────────────────────── */
  --rule-thin:             1px solid var(--c-stone);
  --rule-strong:           1px solid var(--c-stone-deep);
  --rule-brass:            1px solid var(--c-brass);
  --rule-ink:              1px solid var(--c-ink);

  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             16px;
  --radius-pill:           999px;
}

/* ─── Semantic aliases — name by role, not by hue ────────────────────── */
:root {
  --color-bg:              var(--c-paper);
  --color-bg-secondary:    var(--c-paper-cool);
  --color-text:            var(--c-ink-soft);
  --color-text-strong:     var(--c-ink);
  --color-text-mute:       var(--c-ink-mute);
  --color-brand:           var(--c-tabsamo-blue);
  --color-brand-deep:      var(--c-tabsamo-blue-deep);
  --color-accent:          var(--c-brass);
  --color-rule:            var(--c-stone);
  --color-link:            var(--c-tabsamo-blue-deep);
}

/* Reverse theme (apply via `data-theme="reverse"` on a section or root) */
[data-theme="reverse"] {
  --color-bg:              var(--c-reverse-bg);
  --color-bg-secondary:    var(--c-reverse-bg-soft);
  --color-text:            var(--c-reverse-text);
  --color-text-strong:     #FFFFFF;
  --color-text-mute:       var(--c-reverse-text-soft);
  --color-rule:            var(--c-reverse-rule);
  --color-link:            var(--c-tabsamo-blue-soft);
}