/* ============================================================
 * TUTRAM — Global Brand Tokens
 * One source of truth for color, spacing, typography, and
 * common component primitives. Loaded by every layout BEFORE
 * its local <style> block, so layouts can fine-tune locally
 * without forking the design language.
 *
 * Naming rules:
 *   --brand-*   = brand identity (colors, fonts)
 *   --space-*   = vertical/horizontal scale
 *   --radius-*  = corner radius scale
 *   --shadow-*  = elevation
 *   --easing-*  = motion
 *
 * Do NOT inline these values anywhere else. If a page needs a
 * hex color, it should pick the closest brand token.
 * ============================================================ */

:root {
    /* ── Brand palette (derived from logo) ──────────────────── */
    --brand-primary:        #2563eb;   /* electric blue — primary CTA */
    --brand-primary-dark:   #1d4ed8;
    --brand-primary-soft:   rgba(37, 99, 235, .08);
    --brand-primary-glow:   rgba(37, 99, 235, .14);

    --brand-cyan:           #3aa5d8;   /* logo top-light */
    --brand-cyan-soft:      rgba(58, 165, 216, .12);

    --brand-green:          #16a34a;   /* arrow / success */
    --brand-green-soft:     rgba(22, 163, 74, .10);

    --brand-deep:           #06111f;   /* logo deep base */
    --brand-deep-2:         #0a1628;
    --brand-deep-3:         #112236;

    /* ── Surfaces ───────────────────────────────────────────── */
    --brand-bg:             #fafbfc;
    --brand-surface:        #ffffff;
    --brand-surface-2:      #f8fafc;
    --brand-surface-3:      #f1f5f9;

    /* ── Text ───────────────────────────────────────────────── */
    --brand-ink:            #0f172a;
    --brand-ink-soft:       #1e293b;
    --brand-muted:          #64748b;
    --brand-muted-soft:     #94a3b8;

    /* ── Border ─────────────────────────────────────────────── */
    --brand-border:         #e2e8f0;   /* canonical light border */
    --brand-border-strong:  #cbd5e1;
    --brand-border-focus:   #2563eb;

    /* ── Status ─────────────────────────────────────────────── */
    --brand-success:        #059669;
    --brand-success-soft:   rgba(5, 150, 105, .10);
    --brand-warning:        #d97706;
    --brand-warning-soft:   rgba(217, 119, 6, .10);
    --brand-danger:         #dc2626;
    --brand-danger-soft:    rgba(220, 38, 38, .08);

    /* ── Spacing scale (4px base) ───────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* ── Radius ─────────────────────────────────────────────── */
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   18px;
    --radius-xl:   22px;
    --radius-2xl:  28px;
    --radius-pill: 999px;

    /* ── Shadow / elevation ─────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 20px rgba(15, 23, 42, .07);
    --shadow-lg: 0 16px 48px rgba(15, 23, 42, .10);
    --shadow-xl: 0 24px 64px rgba(15, 23, 42, .14);
    --shadow-glow: 0 0 0 6px var(--brand-primary-glow);

    /* ── Motion ─────────────────────────────────────────────── */
    --easing-out: cubic-bezier(.2, .7, .2, 1);
    --easing-in:  cubic-bezier(.4, 0, .2, 1);
    --dur-fast:   .15s;
    --dur-base:   .25s;
    --dur-slow:   .4s;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans Armenian', 'Noto Sans', sans-serif;
    --font-display: 'Bebas Neue', 'Inter', 'Noto Sans Armenian', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace;

    /* Per-locale display swap */
    --display-tracking: -.02em;

    /* ── Legacy aliases (DO NOT USE in new code) ────────────── *
     * Old layouts referenced --accent / --mint / --text. We keep
     * those names as aliases so we can ship the brand tokens
     * without breaking the world; remove once each layout is
     * migrated to the canonical names.
     * ──────────────────────────────────────────────────────── */
    --accent:        var(--brand-primary);
    --accent-dark:   var(--brand-primary-dark);
    --accent-soft:   var(--brand-primary-soft);
    --mint:          var(--brand-primary);
    --mint-dark:     var(--brand-primary-dark);
    --mint-soft:     var(--brand-primary-soft);
    --mint-glow:     var(--brand-primary-glow);
}

/* Armenian-locale display heading swap (Bebas Neue lacks Armenian glyphs) */
html[lang^="hy"] {
    --font-display: 'Noto Sans Armenian', 'Inter', system-ui, sans-serif;
    --display-tracking: -.01em;
}

/* ── Reset (gentle — does not stomp Bootstrap) ──────────────── */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

/* ── Standard brand button primitives ───────────────────────── *
 * Pages can use these directly OR define their own variants
 * built on top. They are scoped (.btn-brand-*) so they never
 * collide with Bootstrap's .btn-* classes.
 * ──────────────────────────────────────────────────────────── */
.btn-brand,
.btn-brand-primary,
.btn-brand-ghost,
.btn-brand-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 22px;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--easing-out),
                color var(--dur-fast) var(--easing-out),
                border-color var(--dur-fast) var(--easing-out),
                box-shadow var(--dur-fast) var(--easing-out),
                transform var(--dur-fast) var(--easing-out);
    user-select: none;
    white-space: nowrap;
}

.btn-brand-primary {
    background: var(--brand-primary);
    color: #fff;
}
.btn-brand-primary:hover {
    background: var(--brand-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .28);
}

.btn-brand-ghost {
    background: transparent;
    color: var(--brand-ink);
}
.btn-brand-ghost:hover {
    background: var(--brand-surface-3);
    color: var(--brand-ink);
}

.btn-brand-outline {
    background: var(--brand-surface);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-brand-outline:hover {
    background: var(--brand-primary);
    color: #fff;
}

/* ── Standard card primitive ────────────────────────────────── */
.brand-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

/* ── Standard section eyebrow / title pattern ───────────────── */
.brand-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.brand-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--display-tracking);
    line-height: 1.05;
}

/* ── Locale-safe number formatting cue ──────────────────────── */
.brand-num { font-variant-numeric: tabular-nums; }