/* ============================================================================
   TaxClue — Canonical Design Tokens & Base Components
   ----------------------------------------------------------------------------
   ONE source of truth for brand colour, type, spacing and the core UI atoms
   (buttons, cards, inputs, badges). Load this FIRST on every TaxClue property
   (taxclue.in, app.taxclue.in, app.taxclue.in/billing) so the whole ecosystem
   shares one visual language.

   Everything is namespaced under CSS variables (--tc-*) and `.tc-` classes, so
   including this file is ADDITIVE — it never overrides existing page styles
   until you opt a component in by using a `.tc-` class. Migrate pages onto
   these classes gradually.
   ========================================================================== */

:root {
    /* ── Brand palette ─────────────────────────────────────────── */
    --tc-navy:        #0B1D3A;   /* primary brand (headings, dark surfaces) */
    --tc-navy-900:    #03070F;   /* deepest background */
    --tc-navy-700:    #0B1628;
    --tc-navy-600:    #142842;
    --tc-gold:        #C8992E;   /* accent / CTA */
    --tc-gold-400:    #E8B84A;   /* gold hover / highlight */
    --tc-cream:       #F5F0E6;   /* light text on dark, warm paper */

    /* ── Neutrals ──────────────────────────────────────────────── */
    --tc-ink:         #0B1D3A;   /* body text on light */
    --tc-muted:       #5A6B85;   /* secondary text */
    --tc-line:        #E6E9F0;   /* borders / dividers */
    --tc-bg:          #FFFFFF;
    --tc-bg-soft:     #F7F9FC;

    /* ── Status ────────────────────────────────────────────────── */
    --tc-success:     #1E9E6A;
    --tc-warning:     #E08A1E;
    --tc-danger:      #D64545;
    --tc-info:        #2D6CDF;

    /* ── Typography ────────────────────────────────────────────── */
    --tc-font-head:   'Fraunces', Georgia, 'Times New Roman', serif;
    --tc-font-body:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tc-font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --tc-fs-xs: 12px; --tc-fs-sm: 14px; --tc-fs-md: 16px;
    --tc-fs-lg: 18px; --tc-fs-xl: 22px; --tc-fs-2xl: 28px; --tc-fs-3xl: 36px;
    --tc-lh: 1.6;

    /* ── Spacing scale (4px base) ──────────────────────────────── */
    --tc-sp-1: 4px;  --tc-sp-2: 8px;  --tc-sp-3: 12px; --tc-sp-4: 16px;
    --tc-sp-5: 20px; --tc-sp-6: 24px; --tc-sp-8: 32px; --tc-sp-10: 40px;

    /* ── Radius & elevation ────────────────────────────────────── */
    --tc-radius-sm: 8px;
    --tc-radius:    12px;
    --tc-radius-lg: 18px;
    --tc-radius-pill: 999px;
    --tc-shadow-sm: 0 1px 2px rgba(11,29,58,.06), 0 1px 3px rgba(11,29,58,.08);
    --tc-shadow:    0 4px 14px rgba(11,29,58,.10);
    --tc-shadow-lg: 0 12px 34px rgba(11,29,58,.16);

    --tc-transition: .18s ease;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.tc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--tc-font-body); font-size: var(--tc-fs-sm); font-weight: 600;
    line-height: 1; text-decoration: none; cursor: pointer;
    padding: 12px 20px; border-radius: var(--tc-radius-sm);
    border: 1px solid transparent; transition: var(--tc-transition);
    white-space: nowrap;
}
.tc-btn:focus-visible { outline: 2px solid var(--tc-gold); outline-offset: 2px; }

.tc-btn-primary { background: var(--tc-gold); color: #1A1205; border-color: var(--tc-gold); }
.tc-btn-primary:hover { background: var(--tc-gold-400); border-color: var(--tc-gold-400); }

.tc-btn-navy { background: var(--tc-navy); color: var(--tc-cream); border-color: var(--tc-navy); }
.tc-btn-navy:hover { background: var(--tc-navy-600); }

.tc-btn-ghost { background: transparent; color: var(--tc-navy); border-color: var(--tc-line); }
.tc-btn-ghost:hover { border-color: var(--tc-gold); color: var(--tc-gold); }

.tc-btn-sm { padding: 8px 14px; font-size: var(--tc-fs-xs); }
.tc-btn-lg { padding: 15px 28px; font-size: var(--tc-fs-md); }
.tc-btn-block { width: 100%; }

/* ── Cards ─────────────────────────────────────────────────────── */
.tc-card {
    background: var(--tc-bg); border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius); box-shadow: var(--tc-shadow-sm);
    padding: var(--tc-sp-6);
}
.tc-card--hover { transition: var(--tc-transition); }
.tc-card--hover:hover { box-shadow: var(--tc-shadow-lg); transform: translateY(-2px); }
.tc-card__title { font-family: var(--tc-font-head); font-size: var(--tc-fs-xl); color: var(--tc-navy); margin: 0 0 var(--tc-sp-2); }
.tc-card__text  { font-family: var(--tc-font-body); font-size: var(--tc-fs-sm); color: var(--tc-muted); line-height: var(--tc-lh); margin: 0; }

/* ── Form controls ─────────────────────────────────────────────── */
.tc-label { display: block; font-family: var(--tc-font-body); font-size: var(--tc-fs-sm); font-weight: 600; color: var(--tc-navy); margin-bottom: var(--tc-sp-2); }
.tc-input, .tc-select, .tc-textarea {
    width: 100%; font-family: var(--tc-font-body); font-size: var(--tc-fs-sm); color: var(--tc-ink);
    padding: 11px 14px; background: var(--tc-bg); border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm); transition: var(--tc-transition);
}
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
    outline: none; border-color: var(--tc-gold); box-shadow: 0 0 0 3px rgba(200,153,46,.15);
}
.tc-textarea { min-height: 110px; resize: vertical; }

/* ── Badges / chips ────────────────────────────────────────────── */
.tc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--tc-font-body); font-size: var(--tc-fs-xs); font-weight: 600;
    padding: 4px 10px; border-radius: var(--tc-radius-pill);
    background: rgba(200,153,46,.12); color: var(--tc-gold);
}
.tc-badge--navy    { background: rgba(11,29,58,.08);  color: var(--tc-navy); }
.tc-badge--success { background: rgba(30,158,106,.12); color: var(--tc-success); }
.tc-badge--danger  { background: rgba(214,69,69,.12);  color: var(--tc-danger); }

/* ── Headings helper (opt-in) ──────────────────────────────────── */
.tc-h1, .tc-h2, .tc-h3 { font-family: var(--tc-font-head); color: var(--tc-navy); line-height: 1.2; margin: 0 0 var(--tc-sp-4); }
.tc-h1 { font-size: var(--tc-fs-3xl); font-weight: 700; }
.tc-h2 { font-size: var(--tc-fs-2xl); font-weight: 700; }
.tc-h3 { font-size: var(--tc-fs-xl);  font-weight: 600; }