:root {

    /* ── Colors ─────────────────────────────────── */
    --color-bg:          #000;
    --color-panel-1:       rgba(64, 64, 72, 0.33);
    --color-panel-2:       rgba(72, 72, 96, 0.40);
    --color-border:      rgba(255, 255, 255, 0.30);
    --color-border-highlight: rgba(255, 255, 255, 0.90);
    --color-text:        rgba(0, 0, 0, 0.9);
    --color-text-muted:  rgba(0, 0, 0, 0.6);
    --color-title:       rgba(255, 255, 255, 1);
    --color-accent:      #cc2200;
    --color-icon:        rgba(0, 0, 0, 0.8);
    --color-icon-muted:  rgba(0, 0, 0, 0.4);

    /* ── Effects ─────────────────────────────────── */
    --blur:              8px;
    --outline:           1px solid var(--color-border);
    --shadow:            0 64px 128px rgba(0, 0, 0, 0.75);
    --title-shadow:      0 4px 32px rgba(0, 0, 0, 0.6);

    /* ── Frame Inset ─────────────────────────────── */
    --frame-padding-y:   196px;
    --frame-padding-x:   128px;

    /* ── Spacing ─────────────────────────────────── */
    --section-header-h:  64px;
    --padding-y:         32px;
    --padding-x:         0px;
    --padding:           16px;
    --gap:               16px;
    --section-gap:       128px;
    --scroll-fade:       128px;

    /* ── Layout ──────────────────────────────────── */
    --nav-width:         128px;
    --sidebar-width:     128px;
    --masonry-columns:   4 220px;
    --icon-size:         32px;
    --btn-h:             96px;

    --scroll-offset:     var(--frame-padding-y);

    /* ── Typography ──────────────────────────────── */
    --text-button:         32px;

    /* Title — section names (RENDERS, ABOUT…) */
    --text-title:          96px;
    --text-title-weight:   200;
    --text-title-spacing:  0.12em;

    /* Eyebrow — decorative lead-in lines (UP NEXT, MORE ABOUT…) */
    --text-eyebrow:         32px;
    --text-eyebrow-weight:  300;
    --text-eyebrow-spacing: 0.25em;

    /* Heading — mid-size names and sub-headings */
    --text-heading:          36px;
    --text-heading-weight:   200;
    --text-heading-spacing:  0.12em;

    /* Sub — display links and secondary headings (email, large CTAs) */
    --text-sub:              20px;
    --text-sub-weight:       200;
    --text-sub-spacing:      0.10em;

    /* Flow — general body paragraphs */
    --text-flow:             16px;
    --text-flow-weight:      400;
    --text-flow-spacing:     0em;
    --text-flow-line-height: 1.65;

    /* Body — smaller readable paragraphs and descriptions */
    --text-body:             14px;
    --text-body-weight:      400;
    --text-body-spacing:     0em;
    --text-body-line-height: 1.8;

    /* Label — small uppercase UI labels (skill names, card titles…) */
    --text-label:            12px;
    --text-label-weight:     400;
    --text-label-spacing:    0.14em;

    /* Caption — smallest text: meta info, block labels, percentages */
    --text-caption:          12px;
    --text-caption-weight:   400;
    --text-caption-spacing:  0.18em;

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

    /* ── Layers ──────────────────────────────────── */
    --z-background:      0;
    --z-grain:           1;
    --z-panel:           2;
    --z-buttons:         3;
    --z-foreground:      4;

    /* ── Font ────────────────────────────────────── */
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ── Grain ───────────────────────────────────── */
    --grain-opacity:    1;
    --grain-contrast:   3;
    --grain-speed:      10s;
    --grain-size:       128px;

}

/* ── Light mode overrides ───────────────────────────────── */
/* RGB values are exact inverses of the dark defaults.       */
/* Toggle: document.documentElement.dataset.theme = 'light'  */
:root[data-theme="light"] {

    --color-bg:               #FFF;                     
    --color-panel-1:          rgba(191, 191, 183, 0.16);   
    --color-panel-2:          rgba(183, 183, 159, 0.32);  
    --color-border:           rgba(0, 0, 0, 0.30);          
    --color-border-highlight: rgba(0, 0, 0, 0.90);         
    
    --color-text:             rgba(255, 255, 255, 0.8);     
    --color-text-muted:       rgba(255, 255, 255, 0.4);  
    --color-title:            rgba(0, 0, 0, 1);          
    --color-icon:             rgba(255, 255, 255, 0.8);    
    --color-icon-muted:       rgba(255, 255, 255, 0.4);     

    --shadow:                 0 64px 128px rgba(0, 0, 0, 0.15);
    --title-shadow:           0 4px 32px rgba(0, 0, 0, 0.15);

}