@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Light Theme Colors */
    --lt-primary: #388BFD;
    --lt-secondary: #A371F7;
    --lt-bg-primary: #FFFFFF;
    --lt-bg-secondary: #F6F8FA;
    --lt-text-primary: #1F2328;
    --lt-text-secondary: #656D76;
    --lt-border-primary: #D0D7DE;
    --lt-border-secondary: #EAECEF;

    /* Dark Theme Colors */
    --dt-primary: #58A6FF;
    --dt-secondary: #BC8CFF;
    --dt-bg-primary: #0D1117;
    --dt-bg-secondary: #161B22;
    --dt-text-primary: #E6EDF3;
    --dt-text-secondary: #8B949E;
    --dt-border-primary: #30363D;
    --dt-border-secondary: #21262D;

    /* Default to Light Theme */
    --primary-accent: var(--lt-primary);
    --secondary-accent: var(--lt-secondary);
    --background-primary: var(--lt-bg-primary);
    --background-secondary: var(--lt-bg-secondary);
    --text-primary: var(--lt-text-primary);
    --text-secondary: var(--lt-text-secondary);
    --border-primary: var(--lt-border-primary);
    --border-secondary: var(--lt-border-secondary);
}

html.dark {
    --primary-accent: var(--dt-primary);
    --secondary-accent: var(--dt-secondary);
    --background-primary: var(--dt-bg-primary);
    --background-secondary: var(--dt-bg-secondary);
    --text-primary: var(--dt-text-primary);
    --text-secondary: var(--dt-text-secondary);
    --border-primary: var(--dt-border-primary);
    --border-secondary: var(--dt-border-secondary);
}

body {
    font-family: var(--font-sans);
}

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Headings */
.section-heading {
    @apply text-3xl font-bold tracking-tight border-b border-border-primary pb-4 mb-8 text-text-primary;
}
.theme-heading {
    @apply text-xl font-semibold mb-6 text-text-primary;
}
.component-heading {
    @apply text-lg font-semibold mb-4 text-text-primary;
}

/* Color Palette */
.color-grid {
    @apply grid grid-cols-2 gap-4;
}
.color-swatch-container {
    @apply flex items-center space-x-3;
}
.color-swatch {
    @apply w-12 h-12 rounded-lg border border-border-secondary;
}
.color-info {
    @apply flex flex-col text-sm;
}

/* Iconography */
.icon-display {
    @apply flex flex-col items-center justify-center space-y-2 p-4 bg-background-secondary rounded-lg border border-border-secondary;
}
.icon-preview {
    @apply w-8 h-8 text-text-primary;
}
.icon-label {
    @apply text-xs text-text-secondary font-mono;
}

/* Component Showcase */
.component-showcase {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2;
}
.theme-container {
    @apply p-8 rounded-lg;
    background-color: var(--background-primary);
    color: var(--text-primary);
}
.theme-container.dark {
    --primary-accent: var(--dt-primary);
    --secondary-accent: var(--dt-secondary);
    --background-primary: var(--dt-bg-primary);
    --background-secondary: var(--dt-bg-secondary);
    --text-primary: var(--dt-text-primary);
    --text-secondary: var(--dt-text-secondary);
    --border-primary: var(--dt-border-primary);
    --border-secondary: var(--dt-border-secondary);
}


/* Buttons */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-semibold text-sm rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background-primary;
}
.btn-icon {
    @apply w-4 h-4 mr-2;
}

.btn-primary {
    @apply bg-primary-accent text-white hover:opacity-90 focus:ring-primary-accent;
}
.dark .btn-primary {
    @apply text-dt-bg-primary;
}
html.dark .btn-primary {
    @apply text-dt-bg-primary;
}


.btn-secondary {
    @apply bg-background-secondary text-text-primary border border-border-primary hover:bg-border-secondary focus:ring-primary-accent;
}

.btn-tertiary {
    @apply bg-transparent text-primary-accent hover:bg-primary-accent/10 focus:ring-primary-accent;
}


/* Inputs and Fields */
.input-field {
    @apply w-full bg-background-secondary border border-border-primary text-text-primary text-sm rounded-md px-3 py-2
           placeholder-text-secondary/70 focus:ring-1 focus:ring-primary-accent focus:border-primary-accent outline-none
           transition-colors duration-200;
}
select.input-field {
    @apply pr-8; /* for the dropdown arrow */
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.dark select.input-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
html.dark select.input-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}


/* Code Panels */
.code-panel {
    @apply bg-background-secondary rounded-lg border border-border-secondary overflow-hidden;
}
.code-panel-header {
    @apply text-sm font-semibold text-text-secondary px-4 py-2 border-b border-border-secondary bg-background-primary;
}
.code-block {
    @apply font-mono text-sm p-4 block;
    line-height: 1.6;
}

/* Syntax Highlighting */
.hl-key { color: #d73a49; }
.hl-func { color: #6f42c1; }
.hl-param { color: #e36209; }
.hl-str { color: #032f62; }
.hl-num { color: #005cc5; }
.hl-com { color: #6a737d; }
.hl-const { color: #005cc5; }

.dark .hl-key, html.dark .hl-key { color: #ff7b72; }
.dark .hl-func, html.dark .hl-func { color: #d2a8ff; }
.dark .hl-param, html.dark .hl-param { color: #e6edf3; }
.dark .hl-str, html.dark .hl-str { color: #a5d6ff; }
.dark .hl-num, html.dark .hl-num { color: #79c0ff; }
.dark .hl-com, html.dark .hl-com { color: #8b949e; }
.dark .hl-const, html.dark .hl-const { color: #79c0ff; }


/* Theme Toggle Switch */
.theme-switch {
    @apply relative inline-flex items-center h-8 w-14 cursor-pointer;
}
.theme-switch-track {
    @apply absolute w-full h-full bg-border-primary rounded-full transition-colors;
}
.dark .theme-switch-track, html.dark .theme-switch-track {
    @apply bg-dt-border-primary;
}
.theme-switch-thumb {
    @apply absolute top-1 left-1 flex items-center justify-center w-6 h-6 bg-white rounded-full shadow-md transform transition-transform;
}
.theme-switch-thumb .lucide {
    @apply w-4 h-4 text-gray-500;
}