/*
 * Design System — Modern Developer Documentation Style
 * Extends variables.css with Inter font, 8px spacing, dark mode
 * Load AFTER variables.css and BEFORE component CSS
 */

/* ========================================
   Typography — Inter Font Stack
   ======================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ========================================
   Heading Typography Overrides
   ======================================== */

h1 { font-size: 2.5rem; font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; font-weight: var(--font-weight-medium); }

/* ========================================
   Design System Color Tokens (Light Mode)
   ======================================== */

:root {
    /* Surface colors — clean, modern palette */
    --ds-bg: #F8FAFC;
    --ds-bg-card: #FFFFFF;
    --ds-bg-elevated: #FFFFFF;
    --ds-bg-inset: #F1F5F9;
    --ds-bg-subtle: #F8FAFC;

    /* Text colors */
    --ds-text: #111827;
    --ds-text-secondary: #4B5563;
    --ds-text-tertiary: #6B7280;
    --ds-text-muted: #9CA3AF;

    /* Accent blue (for non-AWS-branded CTAs) */
    --ds-accent: #2563EB;
    --ds-accent-hover: #1D4ED8;
    --ds-accent-light: #EFF6FF;

    /* Border */
    --ds-border: #E2E8F0;
    --ds-border-strong: #CBD5E1;

    /* Card tokens */
    --card-radius: 12px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --card-hover-lift: -4px;

    /* 8px spacing system */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Navigation */
    --nav-bg: rgba(15, 23, 42, 0.95);
    --nav-bg-solid: #0F172A;
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-link-color: #CBD5E1;
    --nav-link-hover: #FFFFFF;
    --nav-link-active-bg: rgba(255, 255, 255, 0.1);

    /* Transition */
    --ds-transition: 0.25s cubic-bezier(0.2, 0, 0, 1);
}


/* ========================================
   Dark Mode — [data-theme="dark"]
   ======================================== */

[data-theme="dark"] {
    /* Surface colors */
    --ds-bg: #0F172A;
    --ds-bg-card: #1E293B;
    --ds-bg-elevated: #1E293B;
    --ds-bg-inset: #0F172A;
    --ds-bg-subtle: #1E293B;

    /* Text colors */
    --ds-text: #F1F5F9;
    --ds-text-secondary: #CBD5E1;
    --ds-text-tertiary: #94A3B8;
    --ds-text-muted: #64748B;

    /* Accent */
    --ds-accent: #60A5FA;
    --ds-accent-hover: #93C5FD;
    --ds-accent-light: rgba(96, 165, 250, 0.1);

    /* Border */
    --ds-border: #334155;
    --ds-border-strong: #475569;

    /* Card tokens */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.2);

    /* Navigation */
    --nav-bg: rgba(2, 6, 23, 0.95);
    --nav-bg-solid: #020617;
    --nav-border: rgba(255, 255, 255, 0.06);

    /* M3 surface tokens — dark */
    --m3-surface: #1C1B1F;
    --m3-surface-container: #211F26;
    --m3-surface-container-high: #2B2930;
    --m3-surface-container-low: #17161A;
    --m3-on-surface: #E6E1E5;
    --m3-on-surface-variant: #CAC4D0;
    --m3-outline: #938F99;
    --m3-outline-variant: #49454F;

    /* Override existing variables.css tokens for dark mode */
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-text-tertiary: #94A3B8;

    --color-bg-light: #0F172A;
    --color-bg-white: #1E293B;
    --color-bg-dark: #F1F5F9;
    --color-bg-gradient-start: #020617;
    --color-bg-gradient-end: #0F172A;

    --color-border: #475569;
    --color-border-light: #334155;
    --color-shadow: rgba(0, 0, 0, 0.3);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}


/* ========================================
   Dark Mode — Body & Container Overrides
   ======================================== */

[data-theme="dark"] body {
    background-color: var(--ds-bg);
    color: var(--ds-text);
}

[data-theme="dark"] .container {
    background-color: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
}

[data-theme="dark"] .card {
    background-color: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
}

[data-theme="dark"] .section {
    background-color: var(--ds-bg-inset);
    border: 1px solid var(--ds-border);
}


/* ========================================
   Dark Mode — Navigation
   ======================================== */

[data-theme="dark"] .fixed-nav-header {
    background: var(--nav-bg-solid);
    border-bottom: 1px solid var(--nav-border);
}

[data-theme="dark"] .breadcrumb-nav {
    background-color: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
}


/* ========================================
   Dark Mode — Text & Headings
   ======================================== */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--ds-text);
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] span {
    color: var(--ds-text-secondary);
}

[data-theme="dark"] a {
    color: var(--ds-accent);
}

[data-theme="dark"] a:hover {
    color: var(--ds-accent-hover);
}


/* ========================================
   Dark Mode — Tags & Badges
   ======================================== */

[data-theme="dark"] .tag {
    background-color: rgba(96, 165, 250, 0.15);
    color: #93C5FD;
}

[data-theme="dark"] .badge {
    opacity: 0.9;
}


/* ========================================
   Dark Mode — Form Elements
   ======================================== */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--ds-bg-inset);
    color: var(--ds-text);
    border-color: var(--ds-border);
}

[data-theme="dark"] input::placeholder {
    color: var(--ds-text-muted);
}


/* ========================================
   Dark Mode — Tables
   ======================================== */

[data-theme="dark"] table {
    border-color: var(--ds-border);
}

[data-theme="dark"] th {
    background-color: var(--ds-bg-inset);
    border-color: var(--ds-border);
}

[data-theme="dark"] td {
    border-color: var(--ds-border);
}

[data-theme="dark"] tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}


/* ========================================
   Dark Mode — Code Blocks
   ======================================== */

[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: #020617;
    color: #E2E8F0;
    border-color: var(--ds-border);
}


/* ========================================
   Dark Mode — Scroll-to-top, Progress
   ======================================== */

[data-theme="dark"] .reading-progress {
    background-color: var(--ds-border);
}

[data-theme="dark"] .scroll-to-top {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}


/* ========================================
   Dark Mode — Print Override (no dark)
   ======================================== */

@media print {
    [data-theme="dark"] body {
        background-color: white;
        color: black;
    }
    [data-theme="dark"] .container {
        background-color: white;
        border-color: #ccc;
    }
}


/* ========================================
   Modern Card Hover Enhancement
   ======================================== */

.card {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--ds-border);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.card:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--card-shadow-hover);
}


/* ========================================
   Modern Button Enhancement
   ======================================== */

.btn {
    border-radius: 8px;
    font-weight: var(--font-weight-medium);
    transition: all var(--ds-transition);
}

.btn-accent {
    background-color: var(--ds-accent);
    color: #FFFFFF;
    border: none;
}

.btn-accent:hover {
    background-color: var(--ds-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}


/* ========================================
   Theme Toggle Button
   ======================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--nav-link-color);
    cursor: pointer;
    transition: all var(--ds-transition);
    padding: 0;
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background-color: var(--nav-link-active-bg);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--nav-link-hover);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

/* Light mode: show moon (to switch TO dark) */
.theme-toggle .icon-moon {
    display: inline;
}
.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline;
}


/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .theme-toggle {
        transition: none;
    }
    .card:hover {
        transform: none;
    }
}