/* =================================================================
   CV3 DESIGN SYSTEM — single source of truth
   -----------------------------------------------------------------
   Shared by every "cv3" surface: the CV (/cv/), the projects gallery
   (/projects/), and each per-project detail page (services/projectDetail.css
   @imports this file).

   What lives HERE (edit once, changes everywhere):
     • Design tokens   — colors, spacing scale, the border ("frame")
                         token, and the button theming tokens.
     • Border          — `--frame` token + `.cv3-frame` utility.
     • Button          — `.cv3-btn` component + `--btn-*` tokens. Legacy
                         page buttons are themed from the same tokens.
     • Layout shell    — reset/base, outer wrapper, nav, body grid,
                         sections + strip, sidebar cards.

   What stays page-local (the genuinely different bits):
     • cv/cv.css            — hero, timeline fields, contact/skills,
                              the compact CV project-row card.
     • projects/projects.css — the tall gallery card, search/filters,
                              the detail popup.
     • services/projectDetail.css — the `.pd-*` detail layout.
   ================================================================= */

/* ===== DESIGN TOKENS ===== */
:root {
    /* Base palette — overridable by the Color Configurator */
    --color-light:  #e0dcd9;
    --color-dark:   #151312;
    --accent-color: #fbc25b;

    /* Primary/secondary mapping */
    --primary-color:   var(--color-light);
    --secondary-color: var(--color-dark);

    /* Semantic aliases derived from the base palette */
    --bg:      var(--color-light);
    --surface: color-mix(in srgb, var(--color-light) 82%, white);
    --dark:    var(--color-dark);
    --text:    var(--color-dark);
    --muted:   color-mix(in srgb, var(--color-dark) 45%, var(--color-light));
    --border:  var(--color-dark);
    --strip-w: 52px;

    /* BORDER ("frame") — single source for every box outline.
       Change the WIDTH/STYLE here (and once more in body.dark-mode below).
       NOTE: --frame bundles var(--border), and a custom property resolves its
       inner var()s at the scope where it is DECLARED, then inherits the result.
       So it must be re-declared in body.dark-mode or borders won't recolor in
       dark mode. The color itself still comes from the single --border token. */
    --frame-w: 2px;
    --frame:   var(--frame-w) solid var(--border);

    /* BUTTON theming — single source for every button's colors.
       Re-declared in body.dark-mode for the same reason as --frame. */
    --btn-bg:     var(--dark);
    --btn-fg:     var(--bg);
    --btn-accent: var(--accent-color);

    /* Spacing scale (4px base) */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;
    --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
    --sp-7: 32px;  --sp-8: 40px;
}
body.dark-mode {
    --primary-color:   var(--color-dark);
    --secondary-color: var(--color-light);
    --bg:      var(--color-dark);
    --surface: color-mix(in srgb, var(--color-dark) 82%, black);
    --dark:    var(--color-light);
    --text:    var(--color-light);
    --muted:   color-mix(in srgb, var(--color-light) 45%, var(--color-dark));
    --border:  var(--color-light);

    /* Re-resolve the derived tokens against the dark-mode --border/--dark/--bg.
       Without this the values stay baked to their light-mode colors (see the
       note in :root). The formula is identical — only the scope differs. */
    --frame:  var(--frame-w) solid var(--border);
    --btn-bg: var(--dark);
    --btn-fg: var(--bg);
}

/* ===== RESET / BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: var(--sp-7);
}

/* ===== BORDER COMPONENT ===== */
/* Reusable outline. Put `.cv3-frame` on any new boxed element instead of
   re-typing a border declaration. */
.cv3-frame { border: var(--frame); }

/* ===== BUTTON COMPONENT =====
   `.cv3-btn` is the reusable button for any new UI. Existing page-specific
   button classes (.cv3-section-button, .cv3-popup-link-btn, .pd-link-btn,
   .cv3-project-link-btn, .cv3-nav-toggle) are themed from the same --btn-*
   tokens in their page files, so colors stay single-sourced. */
.cv3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: var(--frame);
    font: inherit;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.cv3-btn:hover {
    background: var(--btn-accent);
    color: var(--dark);
    border-color: var(--btn-accent);
}
.cv3-btn--ghost { background: transparent; color: var(--text); }
.cv3-btn--block { display: flex; width: 100%; }

/* ===== OUTER WRAPPER ===== */
.cv3-outer {
    max-width: 1320px;
    margin: 0 auto;
    border: var(--frame);
    background: transparent;
    padding: var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
}

/* ===== NAV ===== */
.cv3-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-4) 0 var(--sp-6);
    height: 68px;
    border: var(--frame);
}
.cv3-nav-left {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.cv3-nav-right { display: flex; align-items: center; gap: var(--sp-5); }
.cv3-nav-menu {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
}
.cv3-nav-toggle {
    width: 36px; height: 36px;
    border: var(--frame);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s;
    text-decoration: none;
}
a.cv3-nav-toggle,
a.cv3-nav-toggle:link,
a.cv3-nav-toggle:visited {
    background: var(--bg);
    color: var(--dark);
    text-decoration: none;
}
a.cv3-nav-toggle:hover {
    background: var(--dark);
    color: var(--bg);
    opacity: 1;
}
.cv3-nav-toggle:hover,
.cv3-nav-toggle.is-hovered { opacity: 0.7; }
.cv3-nav-toggle.is-active { background: var(--bg); color: var(--dark); }
.cv3-nav-back {
    width: 36px; height: 36px;
    border: var(--frame);
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.cv3-nav-back:hover,
.cv3-nav-back.is-hovered { background: var(--dark); color: var(--bg); }

/* ===== BODY: two-column ===== */
.cv3-body { display: flex; align-items: flex-start; }

/* ===== MAIN (left) ===== */
.cv3-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: var(--sp-7);
}

/* ===== SECTION WRAPPER — grid: strip column + content column ===== */
.cv3-section {
    display: grid;
    grid-template-columns: var(--strip-w) 1fr;
    border: var(--frame);
    position: relative;
}
.cv3-section::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--strip-w);
    background: var(--dark);
    z-index: 0;
}
.cv3-section > *:not(.cv3-strip) { grid-column: 2; }

/* ===== STRIP (dark left bar) ===== */
.cv3-strip {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--strip-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    color: var(--bg);
    z-index: 1;
}
.cv3-strip svg, .cv3-strip i { width: 16px; height: 16px; flex-shrink: 0; font-size: 14px; }
.cv3-strip-num {
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 1px; color: var(--bg);
}

/* ===== SECTION HEADER + CONTENT ===== */
.cv3-section-header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: var(--frame);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
}
.cv3-section-header svg, .cv3-section-header i { width: 15px; height: 15px; flex-shrink: 0; font-size: 13px; }
.cv3-section-content { padding: var(--sp-6); }
.cv3-section-content > *:first-child { margin-top: 0; }
.cv3-section-content > *:last-child { margin-bottom: 0; }

/* ===== SIDEBAR ===== */
.cv3-sidebar {
    width: 330px;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    padding-left: var(--sp-7);
}
.cv3-sidebar-card { border: var(--frame); }
.cv3-sidebar-card-header {
    display: grid;
    grid-template-columns: var(--strip-w) 1fr;
    align-items: center;
    border-bottom: var(--frame);
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 0;
}
.cv3-sidebar-card-header > svg,
.cv3-sidebar-card-header > i {
    width: 100%; height: 100%;
    box-sizing: border-box;
    padding: var(--sp-4);
    background: var(--dark);
    color: var(--bg);
    align-self: stretch;
    justify-self: start;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.cv3-sidebar-card-header-text {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
}
.cv3-sidebar-card-body { padding: var(--sp-6); }

/* ===== PROJECT GROUPS (shared by CV + gallery) =====
   A group card reuses the project-card look (.cv3-project.cv3-group-head) and
   toggles open to reveal its members in a nested, indented list. */
.cv3-group { position: relative; }
.cv3-group-head { cursor: pointer; }
.cv3-group-members {
    display: none;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-left: var(--sp-5);
    border-left: var(--frame);
}
.cv3-group.is-open > .cv3-group-members { display: flex; }
.cv3-group.is-hidden { display: none; }
.cv3-group-chevron {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.8em;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.cv3-group.is-open .cv3-group-chevron { transform: rotate(90deg); }

/* ===== SHARED RESPONSIVE (two-column collapse) ===== */
@media (max-width: 820px) {
    .cv3-body { flex-direction: column; }
    .cv3-sidebar { width: 100%; padding-left: 0; padding-top: var(--sp-6); }
}
@media (max-width: 560px) {
    body { padding: var(--sp-4); }
    .cv3-outer { padding: var(--sp-4); }
}