/* =========================================================
   SHARED BASE TOKENS
   CSS variables — single source of truth for design system
========================================================= */

:root {
  /* ── Accent (brand purple) ─────────────────────────── */
  --gf-accent:        #8A5CFF;
  --gf-accent-hover:  #7A47F2;
  --gf-accent-dark:   #6336EF;
  --gf-accent-soft:   rgba(138, 92, 255, 0.12);
  --gf-accent-rgb:    138, 92, 255;

  /* ── Primary alias (used by older components) ──────── */
  --gf-primary:       #8A5CFF;
  --gf-primary-dark:  #7A47F2;
  --gf-primary-soft:  #EDE9FF;

  /* ── Backgrounds ───────────────────────────────────── */
  --gf-bg-main:       #F5F6FF;
  --gf-bg-card:       #FFFFFF;

  /* ── Text ──────────────────────────────────────────── */
  --gf-ink:           #17122F;
  --gf-muted:         #68627F;
  --gf-text-primary:  #141414;
  --gf-text-main:     #141414;
  --gf-text-muted:    #6B7280;

  /* ── Surface ───────────────────────────────────────── */
  --gf-surface:       #FFFFFF;
  --gf-bg:            #F7F3FF;

  /* ── Border ─────────────────────────────────────────── */
  --gf-border:        rgba(91, 63, 154, 0.16);

  /* ── Semantic ───────────────────────────────────────── */
  --gf-success:       #15803D;
  --gf-error:         #B42318;
  --gf-warning:       #8A6D00;
  --gf-danger:        #d63638;

  /* ── Border-radius scale ────────────────────────────── */
  --gf-radius-sm:     6px;
  --gf-radius-md:     10px;
  --gf-radius-lg:     16px;
  --gf-radius-xl:     20px;
  --gf-radius-pill:   999px;
  --gf-radius:        16px;

  /* ── Layout ─────────────────────────────────────────── */
  --gf-content-width: 1180px;
  --gf-page-pad:      24px;

  /* ── Shape ──────────────────────────────────────────── */
  --gf-radius:        16px;

  /* ── Elevation ──────────────────────────────────────── */
  --gf-shadow-card:
    0 10px 30px rgba(30, 20, 80, 0.08),
    0 2px 6px rgba(30, 20, 80, 0.04);

  /* ── Buttons ────────────────────────────────────────── */
  --gf-btn-outline-bg:         transparent;
  --gf-btn-outline-text:       #8A5CFF;
  --gf-btn-outline-border:     rgba(138, 92, 255, 0.35);
  --gf-btn-outline-hover-bg:   rgba(138, 92, 255, 0.08);

  /* ── Tabs / pills ───────────────────────────────────── */
  --gf-tab-active-bg:     #8A5CFF;
  --gf-tab-inactive-bg:   #F1F2FF;
  --gf-tab-active-text:   #FFFFFF;
  --gf-tab-inactive-text: #2B2B2B;
  --gf-tab-hover-bg:      rgba(138, 92, 255, 0.12);

  /* ── Header ─────────────────────────────────────────── */
  --gf-header-bg:              #ffffff;
  --gf-header-border:          rgba(0,0,0,0.06);
  --gf-header-icon-bg:         rgba(0,0,0,0.04);
  --gf-header-icon-bg-hover:   rgba(124, 58, 237, 0.08);
  --gf-header-icon-color:      #1f2937;
  --gf-header-icon-muted:      #6b7280;
}