/* ============================================================
   IaC Gen Prototype Design System
   Core Theme: Professionalism, Minimalism, Modernity
   ============================================================ */

:root {
    /* ── Prototype Colors ───────────────────────────────────── */
    --brand-primary: #0078d4; /* Standard Azure/Corporate Blue for Prototype */
    --brand-primary-hover: #005a9e;
    --brand-secondary: #24292e;
    --brand-secondary-hover: #1b1f23;
    --white: #ffffff;
    
    /* Surface Colors (Neutral Gray tokens) */
    --gray-25: #f8f9fa;
    --gray-50: #f3f4f6;
    --gray-75: #eeeff2;
    --gray-100: #e2e4e8;
    --gray-200: #d1d5db;
    --gray-300: #9ca3af;
    --gray-400: #6b7280;
    --gray-500: #4b5563;
    --gray-600: #374151;
    --gray-700: #111827;
    
    /* Dark Surface Tokens */
    --gray-dark-900: #191a1b;
    --gray-dark-850: #232529;
    --gray-dark-800: #2a2c30;
    --gray-dark-700: #404449;
    --gray-dark-550: #6a6f77;
    --gray-dark-400: #b0b5bb;
    --gray-dark-200: #e1e4e7;

    /* Semantic Mappings (Light Mode - Default) */
    --bg-body: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: var(--gray-25);
    --bg-input: var(--gray-50);
    --bg-overlay: rgba(36, 41, 46, 0.4);
    --bg-page-header: var(--gray-50);

    --text-primary: var(--brand-secondary);
    --text-secondary: var(--gray-500);
    --text-muted: var(--gray-400);
    --text-inverse: var(--white);
    --text-on-dark: var(--gray-200);

    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-hover);
    --color-primary-light: rgba(0, 120, 212, 0.08);
    --color-secondary: var(--brand-secondary);
    --color-secondary-hover: #000000;

    --color-success: #107c10;
    --color-warning: #ff8c00;
    --color-error: #d83b01;
    --color-info: #0078d4;

    --border-color: var(--gray-75);
    --border-strong: var(--gray-200);
    --border-focus: var(--brand-primary);

    /* ── Elevation ─────────────────────────────────────────── */
    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 15px rgba(0, 120, 212, 0.2);

    /* ── Spacing ───────────────────────────────────────────── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 64px;

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ── Typography ────────────────────────────────────────── */
    --font-primary: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
    --font-heading: 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-mono: 'Cascadia Code', 'JetBrains Mono', monospace;

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-h3: 22px;

    /* ── Layout ────────────────────────────────────────────── */
    --sidebar-width: 260px;
    --topbar-height: 72px;

    /* ── Transition ────────────────────────────────────────── */
    --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-mid: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Prototype Dark Mode ────────────────────────────────── */
[data-theme="dark"] {
    --bg-body: var(--gray-dark-900);
    --bg-sidebar: var(--gray-dark-900);
    --bg-card: var(--gray-dark-850);
    --bg-card-hover: var(--gray-dark-800);
    --bg-input: var(--gray-dark-900);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-page-header: var(--gray-dark-850);

    --text-primary: var(--white);      
    --text-secondary: var(--gray-dark-200);
    --text-muted: var(--gray-dark-400);
    --text-inverse: var(--brand-secondary);

    --border-color: var(--gray-dark-700);
    --border-strong: var(--gray-dark-550);
    --border-focus: var(--brand-primary);

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.8);
}