/*
Theme Name: GitHub Like Theme
Theme URI: https://github.com
Author: Nithin Mohan TK
Author URI: https://dataa.dev
Description: A WordPress theme that replicates GitHub's clean, developer-focused design. Features multiple color schemes (Light, Dark, Dark Dimmed, High Contrast), exceptional code syntax highlighting, and a modern layout perfect for developer blogs. Includes all WordPress theme features with GitHub's signature look and feel.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: github-like-theme
Tags: blog, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, full-width-template, sticky-post, threaded-comments, translation-ready, two-columns, code-highlighting, dark-mode, github-style, developer-blog

This theme, like WordPress, is licensed under the GPL.
*/

/* ============================================
   GITHUB THEME - CSS VARIABLES & DESIGN TOKENS
   Based on GitHub's official design system
   ============================================ */

:root {
    /* GitHub Light Theme (Default) */
    --gh-color-canvas-default: #ffffff;
    --gh-color-canvas-subtle: #f6f8fa;
    --gh-color-canvas-overlay: #ffffff;
    --gh-color-border-default: #d0d7de;
    --gh-color-border-muted: #d8dee4;
    --gh-color-border-subtle: #d0d7de;
    --gh-color-fg-default: #24292f;
    --gh-color-fg-muted: #57606a;
    --gh-color-fg-subtle: #6e7781;
    --gh-color-fg-on-emphasis: #ffffff;
    --gh-color-accent-emphasis: #0969da;
    --gh-color-accent-fg: #0969da;
    --gh-color-accent-subtle: #ddf4ff;
    --gh-color-success-emphasis: #1a7f37;
    --gh-color-success-fg: #1a7f37;
    --gh-color-danger-emphasis: #cf222e;
    --gh-color-danger-fg: #cf222e;
    --gh-color-attention-emphasis: #9a6700;
    --gh-color-attention-fg: #9a6700;
    
    /* Code Colors - Light */
    --gh-code-bg: #f6f8fa;
    --gh-code-border: #d0d7de;
    --gh-code-fg: #24292f;
    --gh-code-comment: #6e7781;
    --gh-code-keyword: #cf222e;
    --gh-code-string: #0a3069;
    --gh-code-function: #8250df;
    --gh-code-variable: #953800;
    --gh-code-number: #0550ae;
    
    /* Typography */
    --gh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --gh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    
    /* Spacing */
    --gh-spacing-1: 4px;
    --gh-spacing-2: 8px;
    --gh-spacing-3: 16px;
    --gh-spacing-4: 24px;
    --gh-spacing-5: 32px;
    --gh-spacing-6: 40px;
    
    /* Border Radius */
    --gh-radius-sm: 3px;
    --gh-radius-md: 6px;
    --gh-radius-lg: 12px;
    
    /* Shadows */
    --gh-shadow-sm: 0 1px 0 rgba(27, 31, 36, 0.04);
    --gh-shadow-md: 0 3px 6px rgba(27, 31, 36, 0.15);
    --gh-shadow-lg: 0 8px 24px rgba(27, 31, 36, 0.2);
    
    /* Transitions */
    --gh-transition-fast: 80ms cubic-bezier(0.33, 1, 0.68, 1);
    --gh-transition-base: 150ms cubic-bezier(0.33, 1, 0.68, 1);
    --gh-transition-slow: 250ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* GitHub Dark Theme */
[data-github-theme="dark"] {
    --gh-color-canvas-default: #0d1117;
    --gh-color-canvas-subtle: #161b22;
    --gh-color-canvas-overlay: #161b22;
    --gh-color-border-default: #30363d;
    --gh-color-border-muted: #21262d;
    --gh-color-border-subtle: #30363d;
    --gh-color-fg-default: #c9d1d9;
    --gh-color-fg-muted: #8b949e;
    --gh-color-fg-subtle: #6e7681;
    --gh-color-fg-on-emphasis: #ffffff;
    --gh-color-accent-emphasis: #58a6ff;
    --gh-color-accent-fg: #58a6ff;
    --gh-color-accent-subtle: rgba(56, 139, 253, 0.1);
    --gh-color-success-emphasis: #3fb950;
    --gh-color-success-fg: #3fb950;
    --gh-color-danger-emphasis: #f85149;
    --gh-color-danger-fg: #f85149;
    --gh-color-attention-emphasis: #d29922;
    --gh-color-attention-fg: #d29922;
    
    /* Code Colors - Dark */
    --gh-code-bg: #161b22;
    --gh-code-border: #30363d;
    --gh-code-fg: #c9d1d9;
    --gh-code-comment: #8b949e;
    --gh-code-keyword: #ff7b72;
    --gh-code-string: #a5d6ff;
    --gh-code-function: #d2a8ff;
    --gh-code-variable: #ffa657;
    --gh-code-number: #79c0ff;
}

/* GitHub Dark Dimmed Theme */
[data-github-theme="dark_dimmed"] {
    --gh-color-canvas-default: #1c2128;
    --gh-color-canvas-subtle: #22272e;
    --gh-color-canvas-overlay: #22272e;
    --gh-color-border-default: #373e47;
    --gh-color-border-muted: #2d333b;
    --gh-color-border-subtle: #373e47;
    --gh-color-fg-default: #adbac7;
    --gh-color-fg-muted: #768390;
    --gh-color-fg-subtle: #636e7b;
    --gh-color-fg-on-emphasis: #cdd9e5;
    --gh-color-accent-emphasis: #539bf5;
    --gh-color-accent-fg: #539bf5;
    --gh-color-accent-subtle: rgba(65, 132, 228, 0.1);
    --gh-color-success-emphasis: #57ab5a;
    --gh-color-success-fg: #57ab5a;
    --gh-color-danger-emphasis: #e5534b;
    --gh-color-danger-fg: #e5534b;
    --gh-color-attention-emphasis: #c69026;
    --gh-color-attention-fg: #c69026;
    
    /* Code Colors - Dark Dimmed */
    --gh-code-bg: #22272e;
    --gh-code-border: #373e47;
    --gh-code-fg: #adbac7;
    --gh-code-comment: #768390;
    --gh-code-keyword: #f47067;
    --gh-code-string: #96d0ff;
    --gh-code-function: #dcbdfb;
    --gh-code-variable: #f69d50;
    --gh-code-number: #6cb6ff;
}

/* GitHub High Contrast Theme */
[data-github-theme="high_contrast"] {
    --gh-color-canvas-default: #0a0e27;
    --gh-color-canvas-subtle: #0d1117;
    --gh-color-canvas-overlay: #0d1117;
    --gh-color-border-default: #6e7681;
    --gh-color-border-muted: #30363d;
    --gh-color-border-subtle: #6e7681;
    --gh-color-fg-default: #f0f6fc;
    --gh-color-fg-muted: #c9d1d9;
    --gh-color-fg-subtle: #b1bac4;
    --gh-color-fg-on-emphasis: #ffffff;
    --gh-color-accent-emphasis: #58a6ff;
    --gh-color-accent-fg: #58a6ff;
    --gh-color-accent-subtle: rgba(56, 139, 253, 0.15);
    --gh-color-success-emphasis: #3fb950;
    --gh-color-success-fg: #3fb950;
    --gh-color-danger-emphasis: #f85149;
    --gh-color-danger-fg: #f85149;
    --gh-color-attention-emphasis: #d29922;
    --gh-color-attention-fg: #d29922;
    
    /* Code Colors - High Contrast */
    --gh-code-bg: #0d1117;
    --gh-code-border: #6e7681;
    --gh-code-fg: #f0f6fc;
    --gh-code-comment: #c9d1d9;
    --gh-code-keyword: #ff7b72;
    --gh-code-string: #a5d6ff;
    --gh-code-function: #d2a8ff;
    --gh-code-variable: #ffa657;
    --gh-code-number: #79c0ff;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--gh-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gh-color-fg-default);
    background-color: var(--gh-color-canvas-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-top: 24px;
    margin-bottom: 16px;
    color: var(--gh-color-fg-default);
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin-bottom: 16px;
}

a {
    color: var(--gh-color-accent-fg);
    text-decoration: none;
    transition: color var(--gh-transition-fast);
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: var(--gh-font-mono);
    font-size: 85%;
    padding: 0.2em 0.4em;
    margin: 0;
    background-color: var(--gh-code-bg);
    border-radius: var(--gh-radius-sm);
    border: 1px solid var(--gh-code-border);
    color: var(--gh-code-fg);
}

pre {
    font-family: var(--gh-font-mono);
    font-size: 12px;
    line-height: 1.45;
    background-color: var(--gh-code-bg);
    border: 1px solid var(--gh-code-border);
    border-radius: var(--gh-radius-md);
    padding: 16px;
    overflow: auto;
    margin-bottom: 16px;
}

pre code {
    display: inline;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--gh-color-border-default);
    border-radius: var(--gh-radius-md);
    background-color: var(--gh-color-canvas-subtle);
    color: var(--gh-color-fg-default);
    text-decoration: none;
    transition: all var(--gh-transition-fast);
}

.btn:hover {
    background-color: var(--gh-color-canvas-overlay);
    border-color: var(--gh-color-border-default);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--gh-color-accent-emphasis);
    color: var(--gh-color-fg-on-emphasis);
    border-color: var(--gh-color-accent-emphasis);
}

.btn-primary:hover {
    background-color: var(--gh-color-accent-fg);
    border-color: var(--gh-color-accent-fg);
    color: var(--gh-color-fg-on-emphasis);
}

/* Layout */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    background-color: var(--gh-color-canvas-default);
    border-bottom: 1px solid var(--gh-color-border-default);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-main {
    flex: 1;
    padding: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .site-main {
        padding: 16px;
    }
    
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
}