:root {
    /* Color */
    --bg:           #000000;
    --surface-1:    #171717;
    --surface-2:    #282828;
    --surface-3:    #1f1f1f;
    --border:       rgba(255,255,255,0.10);
    --border-strong:rgba(255,255,255,0.25);

    --text:         #ffffff;
    --text-dim:     #d9d9d9;
    --text-muted:   #9d9d9d;
    --text-faint:   rgba(255,255,255,0.55);

    /* Brand gradient sampled from Figma stops */
    --brand-stop-1: #db2f24;
    --brand-stop-2: #78164b;
    --brand-stop-3: #240557;
    --brand-gradient: linear-gradient(90deg, var(--brand-stop-1) 0%, var(--brand-stop-2) 50%, var(--brand-stop-3) 100%);
    --brand-gradient-soft: linear-gradient(90deg,#db2f2466 0%,#78164b66 50%,#24055766 100%);

    /* Typography */
    --font: "Gantari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display-xl: 68px;
    --fs-display-lg: 50px;
    --fs-display-md: 43px;
    --fs-display-sm: 35px;
    --fs-h1: 50px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --fs-body-lg: 20px;
    --fs-body: 16px;
    --fs-caption: 12px;

    --lh-tight: 1.05;
    --lh-snug:  1.2;
    --lh-body:  1.55;

    /* Layout */
    --container: 1200px;
    --gutter:    24px;
    --header-h:  86px;
    --section-y: 96px;

    /* Effects */
    --radius:    6px;
    --radius-lg: 12px;
    --shadow:    0 10px 40px rgba(0,0,0,0.4);
    --ring:      0 0 0 1px var(--border-strong);
    --tx:        0.18s cubic-bezier(0.4, 0, 0.2, 1);
}