:root {
    /* ── DigiNotary Brand Palette ─────────────────────────────── */
    /*
     * THREE-TOKEN COLOUR SYSTEM — edit only this block to retheme.
     *
     * --color-primary   → Teal  #43C0B8  — buttons, active states, highlights
     * --color-secondary → Dark  #160646  — sidebar, hero, footer, deep surfaces
     * --color-accent    → Cyan  #00A3C4  — gradient mid-stops, progress, badges
     */

    /* Primary — Brand Teal */
    --color-primary:          #43C0B8;
    --color-primary-hover:    #379E97;
    --color-primary-light:    rgba(67, 192, 184, 0.10);
    --color-primary-glow:     rgba(67, 192, 184, 0.25);

    /* Secondary — Dark Violet-Blue (deep surfaces) */
    --color-secondary:        #160646;
    --color-secondary-hover:  #0F0430;
    --color-secondary-deep:   #0A0225;

    /* Accent — Cyan Blue (gradient mid-stops, vibrant pops) */
    --color-accent:           #00A3C4;
    --color-accent-hover:     #0087A3;
    --color-accent-deep:      #006E87;

    /* ── Neutrals ──────────────────────────────────────────────── */
    --color-bg:               #F5F5F5;
    --color-bg-dark:          #EBEBEB;
    --color-surface:          #FFFFFF;
    --color-border:           #E8E8F0;

    --color-text:             #1A1A1A;
    --color-text-muted:       #757575;
    --color-text-light:       #9E9E9E;

    --color-success:          #10B981;
    --color-danger:           #EF4444;
    --color-warning:          #F59E0B;

    /* ── Shadows ──────────────────────────────────────────────── */
    --shadow-sm:   0 2px 8px  rgba(22, 6, 70, 0.06);
    --shadow-md:   0 4px 20px rgba(22, 6, 70, 0.10);
    --shadow-lg:   0 8px 40px rgba(22, 6, 70, 0.14);
    --shadow-teal: 0 4px 24px rgba(67, 192, 184, 0.30);
    --shadow-cyan: 0 4px 24px rgba(0, 163, 196, 0.25);
}

/* ── Base Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--color-secondary);
}

/* ── Brand Utility Classes ────────────────────────────────────── */
.text-primary-brand  { color: var(--color-primary)    !important; }
.text-secondary-brand{ color: var(--color-secondary)  !important; }
.bg-primary-brand    { background-color: var(--color-primary)   !important; color: #fff !important; }
.bg-secondary-brand  { background-color: var(--color-secondary) !important; color: #fff !important; }

/* Legacy compat aliases */
.brand-green-text { color: var(--color-primary)   !important; }
.brand-gold-text  { color: var(--color-secondary) !important; }
.brand-green-bg   { background-color: var(--color-primary) !important; color: #fff !important; }

/* ── Brand Card ───────────────────────────────────────────────── */
.brand-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Primary Button ───────────────────────────────────────────── */
.btn-brand-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.65rem 1.6rem;
    border-radius: 8px;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.btn-brand-primary:hover {
    background-color: var(--color-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-teal);
}
.btn-brand-primary:active { transform: scale(0.97); }

/* ── Outline Button ───────────────────────────────────────────── */
.btn-brand-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 700;
    padding: 0.6rem 1.6rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.btn-brand-outline:hover {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-teal);
}
.btn-brand-outline:active { transform: scale(0.97); }

/* ── Dark Secondary Button ────────────────────────────────────── */
.btn-brand-dark {
    background-color: var(--color-secondary);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.65rem 1.6rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-brand-dark:hover { background-color: var(--color-secondary-hover); color: #fff; }
.btn-brand-dark:active { transform: scale(0.97); }