/* tokens.css — design tokens: fonts, colour variables, per-page accent maps.
   Everything here is configuration the other files consume via var()/class. */

:root {
    --font-display: 'LRTOksana', Perpetua, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'LRTOksana';
    src: url('../fonts/lrtoksana.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Timeless';
    src: url('../fonts/timeless.ttf');
    font-display: swap;
}

:root {
    --accent:        #5fbf95;
    --accent-deep:   #2e8b57;
    --panel:         rgba(12, 16, 14, 0.72);
    --panel-edge:    rgba(255, 255, 255, 0.14);
    --sheen:         rgba(255, 255, 255, 0.06);
    --text-soft:     rgba(255, 255, 255, 0.82);

    /* The ".ai" gradient: stops only, so the header rule can run it vertically
       and the wordmark horizontally without the two drifting apart.
       Used by .ask-brand-ai and #header #title::before. */
    --brand-stops:   #22d3ee, #818cf8 55%, #e879f9;
    --brand-glow:    rgba(129, 140, 248, 0.55);
}

/* ---- Per-page accent colours. Each section pane recolours --accent (and its
        deeper shade), so the header rule, section labels, card borders, links
        and buttons on that page all share one hue that matches its home-page
        dashboard card. The masthead and nav sit outside the panes and stay
        green. ---- */
.pane-work      { --accent: #5fbf95; --accent-deep: #2e8b57; }
.pane-skills    { --accent: #4a90d9; --accent-deep: #2f6dab; }
.pane-projects  { --accent: #a06cd5; --accent-deep: #6f42a3; }
.pane-ai        { --accent: #f0a24b; --accent-deep: #c8792a; }
.pane-policy    { --accent: #2bb6a3; --accent-deep: #1c8576; }
.pane-community { --accent: #f0b429; --accent-deep: #b8880f; }
.pane-more      { --accent: #b07cf5; --accent-deep: #7141b8; }
.pane-bio       { --accent: #e8729c; --accent-deep: #b84e77; }
.pane-cloud     { --accent: #2563c9; --accent-deep: #1c4a99; }

/* The More page runs three sections on one page, each recoloured to match the
   subject: teal for policy (as the old Policy tab was), purple for music (the
   page's own hue), blue for education (as the Skills tab). */
.more-sec--policy    { --accent: #2bb6a3; --accent-deep: #1c8576; }
.more-sec--music     { --accent: #b07cf5; --accent-deep: #7141b8; }
.more-sec--education { --accent: #4a90d9; --accent-deep: #2f6dab; }

/* Each pill carries its section colour, so it matches its page when active and
   hints at it on hover (the colour cascade below matches the pane accents). */
.tab-home      { --tab-c: #5fbf95; }
.tab-work      { --tab-c: #5fbf95; }
.tab-skills    { --tab-c: #4a90d9; }
.tab-projects  { --tab-c: #a06cd5; }
.tab-ai        { --tab-c: #f0a24b; }
.tab-cloud     { --tab-c: #2563c9; }
.tab-policy    { --tab-c: #2bb6a3; }
.tab-community { --tab-c: #f0b429; }
.tab-more      { --tab-c: #b07cf5; }
.tab-bio       { --tab-c: #e8729c; }

/* Home dashboard card accents (--c). */
.hcard-work      { --c: #5fbf95; }
.hcard-skills    { --c: #4a90d9; }
.hcard-projects  { --c: #a06cd5; }
.hcard-ai        { --c: #f0a24b; }
.hcard-policy    { --c: #2bb6a3; }
.hcard-community { --c: #f0b429; }
.hcard-contact   { --c: #e8729c; }

/* =====================  CLOUD EXPLAINER PAGE  =====================
   Three stacked, collapsible, colour-coded Mermaid flowcharts. The colour
   language is defined once here and carried into every chart, both via the
   Mermaid classDef (var() resolves on the inline SVG) and reinforced with CSS
   below so it holds regardless of Mermaid version quirks.
     blue   = npm / JavaScript world
     purple = pip / Python world
     teal   = infrastructure (belongs to neither)                              */
:root {
    --c-npm:        #2563c9;   --c-npm-fill:   #dbe7fb;
    --c-pip:        #7c3aed;   --c-pip-fill:   #e9ddfb;
    --c-infra:      #0e8a8a;   --c-infra-fill: #d6efef;
}