/*
 * Nest Dynamic Report design language for the portfolio.
 * Tokens mirror Nest_DynamicReport.Blazor.UI/wwwroot/css/tokens.css (cream + forest green light mode,
 * warm espresso dark mode, Plus Jakarta Sans / Inter / Cairo, 1rem cards, pill nav, halo focus).
 * Loaded after portfolio.css: it re-maps the legacy variables so every page follows the same tokens.
 */
:root {
    --brand-1: #3f6f33;
    --brand-2: #2d5226;
    --brand-3: #73b061;
    --brand-gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    --brand-soft: color-mix(in srgb, var(--brand-1) 8%, transparent);
    --brand-soft-strong: color-mix(in srgb, var(--brand-1) 14%, transparent);

    --canvas-bg: #eef3e9;
    --surface-card: #fafcf8;
    --surface-subtle: #e2ebdc;
    --border-subtle: #c9d8c1;
    --border-hover: #93ab88;
    --border-control: #6c8764;
    --text-primary: #13241a;
    --text-secondary: #3d5244;
    --text-muted: #51665a;
    --brand-text: #3f6f33;
    --inverse-surface: #16301d;

    --font-heading: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
    --font-body: "Inter", "Cairo", system-ui, sans-serif;

    --radius: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    --radius-button: .625rem;

    --shadow-1: 0 1px 2px rgba(19,36,26,.10), 0 6px 16px -4px rgba(19,36,26,.14);
    --shadow-2: 0 2px 4px rgba(19,36,26,.10), 0 14px 28px -6px rgba(19,36,26,.20);
    --shadow-3: 0 28px 56px -12px rgba(19,36,26,.30);
    --shadow-brand: 0 8px 20px -4px color-mix(in srgb, var(--brand-1) 35%, transparent);
    --halo: 0 0 0 4px color-mix(in srgb, var(--brand-1) 15%, transparent);
    --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--brand-1) 14%, transparent);
    --ease: cubic-bezier(.2, 0, 0, 1);

    /* legacy portfolio variables follow the Nest tokens */
    --canvas: var(--canvas-bg);
    --card: var(--surface-card);
    --subtle: var(--surface-subtle);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-subtle);
    --accent: var(--brand-text);
    --brand: var(--brand-1);
    --bs-primary-rgb: 63,111,51;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--canvas-bg);
    --bs-border-color: var(--border-subtle);
    --bs-secondary-color: var(--text-muted);
    --glass-radius: var(--radius-lg);
    color-scheme: light;
}

/* Dark mode: warm espresso surfaces, brand green stays the accent, cream text. */
html[data-bs-theme=dark] {
    --canvas-bg: #0f0c09;
    --surface-card: #2e261e;
    --surface-subtle: #1b1611;
    --border-subtle: #57493a;
    --border-hover: #7d6b52;
    --border-control: #8d7d68;
    --text-primary: #f5eee1;
    --text-secondary: #d3c7b3;
    --text-muted: #ab9f8c;
    --brand-text: #88c676;
    --brand-soft: color-mix(in srgb, var(--brand-1) 18%, transparent);
    --brand-soft-strong: color-mix(in srgb, var(--brand-1) 28%, transparent);
    --shadow-1: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px -8px rgba(0,0,0,.8);
    --shadow-2: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px -6px rgba(0,0,0,.85);
    --shadow-3: 0 28px 56px -12px rgba(0,0,0,.9);
    --bs-primary-rgb: 136,198,118;
    color-scheme: dark;
}
html[data-bs-theme=dark] .text-success, html[data-bs-theme=dark] .badge.text-success { color: #7de68d !important; }
html[data-bs-theme=dark] .text-danger, html[data-bs-theme=dark] .badge.text-danger { color: #ffa49e !important; }

/* Typography (Stitch scale) */
html[dir=rtl] { --font-heading: "Cairo", system-ui, sans-serif; --font-body: "Cairo", system-ui, sans-serif; }
body { font: 400 16px/26px var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, .brand, .identity-title { font-family: var(--font-heading); }
h1, .identity-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2, .section-title { font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.section-title { font-size: clamp(1.6rem, 3vw, 2rem); }
.project-title { font-size: 1.25rem; line-height: 1.4; }
td, .tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3, html[dir=rtl] .identity-title { letter-spacing: 0; line-height: 1.5; }

a { color: var(--brand-text); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: 2px;
}
main { background: none; }

/* Header: a card-coloured bar with a hairline and Nest's soft shadow; pill navigation */
.portfolio-header { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-1); }
.nav-shell { min-height: 72px; }
.brand { font-weight: 800; letter-spacing: -.01em; }
.brand-mark { background: var(--brand-1); }
html[data-bs-theme=dark] .brand-mark { background: var(--brand-text); }
nav a { font: 600 14px/20px var(--font-body); border-radius: var(--radius-full); padding: 8px 14px; color: var(--text-secondary); }
nav a:hover { background: var(--surface-subtle); color: var(--text-primary); text-decoration: none; }
nav a[aria-current], nav a.current { background: var(--brand-soft-strong); color: var(--brand-text); font-weight: 700; }
.nav-actions button { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); transition: background .2s var(--ease), border-color .2s var(--ease); }
.nav-actions button:hover { background: var(--surface-subtle); border-color: var(--border-hover); }
.nav-cv { background: var(--brand-gradient); color: #fff; border-radius: var(--radius-button); font-weight: 600; box-shadow: var(--shadow-brand); }
.nav-cv:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

/* Hero */
.hero-section { background: radial-gradient(ellipse at 15% 0, var(--brand-soft-strong), transparent 55%); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding-inline: 12px;
    background: var(--brand-soft); color: var(--brand-text);
    border-radius: var(--radius-full);
    font: 600 12px/16px var(--font-body); letter-spacing: .04em; text-transform: uppercase;
}
html[dir=rtl] .eyebrow { letter-spacing: 0; text-transform: none; }
.identity-title { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.hero-role { font: 600 clamp(1.1rem, 2.4vw, 1.5rem)/1.5 var(--font-heading); color: var(--brand-text); }
.hero-intro { font: 400 17px/28px var(--font-body); color: var(--text-secondary); }
.profile-links a { color: var(--text-secondary); font-weight: 600; border-radius: var(--radius-full); padding-inline: 4px; }
.profile-links a:hover { color: var(--brand-text); }
.hero-photo-wrapper {
    background: var(--surface-card); padding: 12px !important;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2); overflow: hidden;
}
.hero-photo { filter: none; mix-blend-mode: normal; border-radius: var(--radius-lg) !important; }
.social-avatar { filter: none; }
.social-avatar-wrap { background: var(--brand-soft-strong); border: 2px solid var(--brand-text); }

/* Buttons */
.btn { border-radius: var(--radius-button) !important; font: 600 14px/20px var(--font-body); min-height: 44px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease); }
.btn-primary { background: var(--brand-gradient); border: 0; color: #fff; box-shadow: var(--shadow-brand) !important; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--brand-gradient); color: #fff; filter: brightness(1.08); border: 0; }
.btn-outline-light { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-control); }
.btn-outline-light:hover { background: var(--surface-subtle); color: var(--text-primary); border-color: var(--brand-text); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }

/* Cards */
.glass-card, .stat-card, .skill-card, .timeline-content, .experience-card, .level-card, .social-card, .social-link-card, .qr-card {
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.glass-card:hover, .skill-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-2); }
.project-card { background: var(--surface-card); border-radius: var(--radius-lg); }
.project-category { font: 600 12px/16px var(--font-body); color: var(--brand-text); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
html[dir=rtl] .project-category { letter-spacing: 0; text-transform: none; }
.project-title::before { font: 600 12px/16px var(--font-body); color: var(--text-muted); letter-spacing: .04em; margin-bottom: 10px; }
.project-tech-stack { border-top-color: var(--row-divider, var(--border-subtle)); }
.project-link { font-weight: 600; }
.project-details { border-top-color: var(--border-subtle); }
.project-details summary { color: var(--brand-text); font-weight: 600; }
.timeline-content { border-inline-start: 3px solid var(--brand-1); }
#projects, #experience { background: var(--surface-subtle); }

/* Chips and badges: 28px pill on a soft brand tint */
.glass-badge, .glass-icon-box, .timeline-content .badge {
    display: inline-flex; align-items: center; min-height: 28px;
    background: var(--brand-soft) !important; color: var(--brand-text) !important;
    border-radius: var(--radius-full); padding: 2px 12px;
    font: 500 12px/16px var(--font-body);
}

/* Forms */
.project-search input, .form-control, .form-select, .input-group-text {
    min-height: 42px; background: var(--surface-card); color: var(--text-primary);
    border: 1px solid var(--border-control); border-radius: var(--radius);
}
.form-control:focus, .form-select:focus, .project-search input:focus {
    background: var(--surface-card); color: var(--text-primary);
    border-color: var(--brand-1); box-shadow: var(--focus-ring-soft); outline: none;
}
.form-control::placeholder, .project-search input::placeholder { color: var(--text-muted); }

/* Footer, mobile bar, More sheet */
.portfolio-footer { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.footer-links a { color: var(--text-secondary); font-weight: 600; }
.footer-links a:hover { color: var(--brand-text); }
.skip-link { background: var(--brand-1); border-radius: 0 0 var(--radius) var(--radius); }
.mobile-bottom-nav { background: var(--surface-card); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 20px rgba(19,36,26,.10); }
.mobile-bottom-nav .mobile-nav-item { border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 600; }
.mobile-bottom-nav a[aria-current], .mobile-bottom-nav button[aria-expanded=true] { background: var(--brand-soft-strong); color: var(--brand-text); }
.mobile-bottom-nav a[aria-current]:hover { background: var(--brand-soft-strong); }
.more-sheet { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3); }
.more-sheet nav a { background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-weight: 600; color: var(--text-primary); border-radius: var(--radius-md); }
.more-heading button { background: var(--surface-subtle); border-color: var(--border-subtle); }

/* Stats and skills */
#stats .glass-card { border-inline-start: 2px solid var(--brand-1); box-shadow: none; }
.skill-groups h3 { font: 600 16px/24px var(--font-heading); color: var(--text-primary); }
.skill-groups p { color: var(--text-secondary); }

/* Scrollbars follow the theme, as in Nest */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-primary) 50%, var(--surface-card)) var(--surface-subtle); }