/*
 * ── Brand colour tokens ───────────────────────────────────────────────────
 *
 * This is the single source of truth for the site's colour palette.
 * To retheme, update the values here — nowhere else.
 *
 * hero-c1 … hero-c4   Hero gradient stops, bright → dark (light mode).
 *                      Dark mode overrides shift the range darker.
 *
 * skill-N-a / skill-N-b   Skill card gradient pairs (start → end).
 *                          These stay the same in both light and dark mode.
 *
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
    /* Hero gradient — light mode (brightest → darkest) */
    --hero-c1: #3b82f6;   /* blue-500  */
    --hero-c2: #2563eb;   /* blue-600  */
    --hero-c3: #1d4ed8;   /* blue-700  */
    --hero-c4: #1e40af;   /* blue-800  */

    /* Skill card gradients — fixed across modes */
    --skill-1-a: #3b82f6;   --skill-1-b: #6366f1;   /* card 1 */
    --skill-2-a: #2563eb;   --skill-2-b: #4f46e5;   /* card 2 */
    --skill-3-a: #1d4ed8;   --skill-3-b: #4338ca;   /* card 3 */
    --skill-4-a: #1e40af;   --skill-4-b: #3730a3;   /* card 4 */
}

.dark-mode {
    /* Hero gradient — dark mode (darkest end of the same family) */
    --hero-c1: #1e40af;   /* blue-800  */
    --hero-c2: #1e3a8a;   /* blue-900  */
    --hero-c3: #0f172a;   /* slate-900 */
    --hero-c4: #000000;   /* black     */

    /* Skill card vars intentionally unchanged in dark mode */

    /* ── Dark mode surface & text tokens ─────────────────────────────────────
       These cascade to all descendants of .dark-mode (body), so every dark
       mode rule in index.html can reference them instead of raw hex values.
       To retheme dark mode, update only these values.
       ──────────────────────────────────────────────────────────────────────── */

    /* Surfaces */
    --dark-bg:             #0f172a;   /* page background   — slate-900 */
    --dark-surface:        #1e293b;   /* cards, modals     — slate-800 */
    --dark-surface-raised: #334155;   /* hover / elevated  — slate-700 */

    /* Borders */
    --dark-border:         #475569;   /* standard borders  — slate-600 */
    --dark-border-subtle:  #64748b;   /* hover / subtle    — slate-500 */

    /* Text */
    --dark-text-primary:   #f1f5f9;   /* headings, emphasis — slate-100 */
    --dark-text:           #e2e8f0;   /* body text          — slate-200 */
    --dark-text-muted:     #cbd5e1;   /* secondary text     — slate-300 */
    --dark-text-subtle:    #94a3b8;   /* placeholder / muted — slate-400 */
}

/*
 * ── Sizing & typography tokens ────────────────────────────────────────────
 *
 * Update these to retheme spacing and scale site-wide.
 *
 * hero-*        Hero section font sizes across breakpoints.
 * tag-*         Tech / skill pill tag sizing (padding + font size).
 * prose-*       Maximum readable line width for body copy.
 *
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
    /* Hero — subtitle (the small label above the name) */
    --hero-sub-size:    0.875rem;   /* mobile  → text-sm   */
    --hero-sub-size-md: 1rem;       /* tablet+ → text-base */

    /* Hero — name */
    --hero-name-size:    2.25rem;   /* mobile  → text-4xl */
    --hero-name-size-md: 3rem;      /* tablet  → text-5xl */
    --hero-name-size-lg: 4.5rem;    /* desktop → text-7xl */

    /* Tech / skill tag pills */
    --tag-px:        0.75rem;   /* horizontal padding → px-3 */
    --tag-py:        0.25rem;   /* vertical padding   → py-1 */
    --tag-font-size: 0.75rem;   /* font size          → text-xs */

    /* Maximum prose line width for body copy on wide screens */
    --prose-max-width: 65ch;

    /* Achievement bullet dots */
    --bullet-size: 0.5rem;    /* w-2 h-2 */
    --bullet-mt:   0.5rem;    /* mt-2    */
    --bullet-mr:   0.75rem;   /* mr-3    */

    /* Skill card icon sizes */
    --skill-icon-lg: 2.5rem;  /* w-10 h-10 — section header icon */
    --skill-icon-sm: 1rem;    /* w-4 h-4  — inline skill item icon */

    /* Animation durations & easings */
    --anim-page-enter:      0.6s;
    --anim-page-enter-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --anim-hero-fade:       0.6s;
    --anim-card-slide:      0.8s;
    --anim-modal-slide:     0.3s;
    --anim-scroll-card:     0.3s;

    /* Experience card visual panel */
    --exp-visual-width:            45%;
    --exp-visual-min-height:       400px;
    --exp-visual-min-height-tablet: 250px;
    --exp-visual-min-height-mobile: 200px;

    /* Project modal */
    --modal-max-width:    800px;
    --modal-max-height:   80vh;
    --modal-margin:       5% auto;
    --modal-backdrop:     rgba(0, 0, 0, 0.5);
    --modal-backdrop-blur: blur(4px);

    /* Content section heading */
    --section-title-size: 1.5rem;  /* text-2xl */

    /* Chat widget panel & toggle sizing */
    --chat-panel-width:      380px;
    --chat-panel-height:     560px;
    --chat-panel-max-width:  calc(100vw - 2rem);
    --chat-panel-max-height: calc(100vh - 2rem);
    --chat-toggle-size:      3.5rem;   /* w-14 h-14 */

    /* Z-index scale — single place to manage stacking order */
    --z-base:        0;
    --z-nav:        10;
    --z-dropdown:   20;
    --z-overlay:    50;   /* chat widgets */
    --z-modal:    1000;
    --z-modal-close: 1001;
}

/*
 * ── Reusable component classes ────────────────────────────────────────────
 * These consume the tokens above. Add colour/background via Tailwind classes
 * alongside these — the component class handles only sizing.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* Tech tag pill — sizing only. Pair with Tailwind colour utilities. */
.tech-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--tag-py) var(--tag-px);
    font-size: var(--tag-font-size);
    font-weight: 500;
    border-radius: 9999px;
}