/**
 * Medium Clone Design Tokens
 * Generated CSS Custom Properties
 *
 * Usage: var(--color-primary), var(--spacing-4), etc.
 *
 * Structure:
 * - Base Tokens: Raw values (colors, typography, spacing)
 * - Semantic Tokens: Purpose-based (bg-primary, text-secondary)
 * - Component Tokens: Component-specific (button-*, card-*, etc.)
 * - Stitch Design System: Premium newsletter color palette
 */

:root {
  /* ===========================================
   * BASE TOKENS - Colors
   * =========================================== */

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ===========================================
   * STITCH DESIGN SYSTEM - Color Palette
   * =========================================== */

  /* Stitch Primary Colors */
  --stitch-lavender: #7B7BA8;
  --stitch-lavender-soft: #A4A4CB;
  --stitch-lavender-light: #C5C5DE;
  --stitch-lavender-dark: #5C5C8A;

  /* Stitch Accent Colors */
  --stitch-golden: #F5C542;
  --stitch-golden-light: #F8D877;
  --stitch-golden-dark: #D4A82E;

  /* Stitch Neutral Colors */
  --stitch-cream: #F5F2EB;
  --stitch-cream-light: #FAF9F6;
  --stitch-cream-dark: #E8E4D9;

  /* Stitch Dark Colors */
  --stitch-navy: #2D2D4A;
  --stitch-navy-light: #3D3D5C;
  --stitch-navy-dark: #1F1F33;
  --stitch-deep-purple: #1A1A2E;
  --stitch-deep-purple-light: #252542;
  --stitch-deep-purple-dark: #12121F;

  /* Gray Scale */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F2F2F2;
  --color-gray-200: #E6E6E6;
  --color-gray-300: #CCCCCC;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #757575;
  --color-gray-600: #5C5C5C;
  --color-gray-700: #454545;
  --color-gray-800: #292929;
  --color-gray-900: #1A1A1A;

  /* Medium Green (Primary) */
  --color-green-50: #E8F5E8;
  --color-green-100: #C8E6C9;
  --color-green-200: #A5D6A7;
  --color-green-300: #81C784;
  --color-green-400: #4CAF50;
  --color-green-500: #1A8917;
  --color-green-600: #156D12;
  --color-green-700: #105210;
  --color-green-800: #0A3A0A;
  --color-green-900: #052505;

  /* Amber (Warnings, Member Badge) */
  --color-amber-50: #FFF8E1;
  --color-amber-100: #FFECB3;
  --color-amber-200: #FFE082;
  --color-amber-300: #FFD54F;
  --color-amber-400: #FFCA28;
  --color-amber-500: #FFC107;
  --color-amber-600: #FFB300;
  --color-amber-700: #FFA000;
  --color-amber-800: #FF8F00;
  --color-amber-900: #FF6F00;

  /* Red (Errors) */
  --color-red-50: #FFEBEE;
  --color-red-100: #FFCDD2;
  --color-red-200: #EF9A9A;
  --color-red-300: #E57373;
  --color-red-400: #EF5350;
  --color-red-500: #C62828;
  --color-red-600: #B71C1C;
  --color-red-700: #9A0007;
  --color-red-800: #7F0000;
  --color-red-900: #5D0000;

  /* Blue (Info) */
  --color-blue-50: #E3F2FD;
  --color-blue-100: #BBDEFB;
  --color-blue-200: #90CAF9;
  --color-blue-300: #64B5F6;
  --color-blue-400: #42A5F5;
  --color-blue-500: #1976D2;
  --color-blue-600: #1565C0;
  --color-blue-700: #0D47A1;
  --color-blue-800: #0A3069;
  --color-blue-900: #051D40;

  /* ===========================================
   * BASE TOKENS - Typography
   * =========================================== */

  /* Font Families - Korean Support */
  --font-family-serif: 'Noto Serif KR', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
  --font-family-sans: 'Noto Sans KR', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-family-mono: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  --font-family-display: 'Noto Serif KR', 'gt-super', 'Georgia', 'Cambria', serif;
  --font-family-body: 'Noto Serif KR', 'charter', 'Georgia', 'Cambria', serif;
  --font-family-ui: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;

  /* Stitch Font Families */
  --stitch-font-display: 'DM Serif Display', 'Noto Serif KR', 'Georgia', serif;
  --stitch-font-body: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;
  --line-height-article: 1.8;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ===========================================
   * BASE TOKENS - Spacing
   * =========================================== */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* ===========================================
   * BASE TOKENS - Border Radius
   * =========================================== */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Stitch Border Radius */
  --stitch-radius-default: 12px;
  --stitch-radius-md: 24px;
  --stitch-radius-lg: 32px;

  /* ===========================================
   * BASE TOKENS - Shadows
   * =========================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06), 0 10px 10px rgba(0, 0, 0, 0.03);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-outline: 0 0 0 3px rgba(26, 137, 23, 0.15);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);

  /* ===========================================
   * BASE TOKENS - Breakpoints & Containers
   * =========================================== */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-article: 800px;
  --container-wide: 1192px;

  /* ===========================================
   * SEMANTIC TOKENS - Background Colors
   * =========================================== */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-surface: var(--color-white);
  --bg-surface-hover: var(--color-gray-100);
  --bg-muted: var(--color-gray-100);
  --bg-inverse: var(--color-gray-900);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-accent: var(--color-green-500);
  --bg-accent-subtle: var(--color-green-50);
  --bg-accent-hover: var(--color-green-600);

  /* ===========================================
   * SEMANTIC TOKENS - Text Colors
   * =========================================== */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-tertiary: var(--color-gray-500);
  --text-muted: var(--color-gray-400);
  --text-inverse: var(--color-white);
  --text-accent: var(--color-green-500);
  --text-accent-hover: var(--color-green-600);
  --text-link: var(--color-gray-900);
  --text-link-hover: var(--color-gray-700);

  /* ===========================================
   * SEMANTIC TOKENS - Border Colors
   * =========================================== */
  --border-default: var(--color-gray-200);
  --border-muted: var(--color-gray-100);
  --border-strong: var(--color-gray-300);
  --border-inverse: var(--color-gray-700);
  --border-accent: var(--color-green-500);
  --border-focus: var(--color-green-500);

  /* ===========================================
   * SEMANTIC TOKENS - Status Colors
   * =========================================== */
  --status-info: var(--color-blue-500);
  --status-info-bg: var(--color-blue-50);
  --status-info-text: var(--color-blue-700);
  --status-success: var(--color-green-500);
  --status-success-bg: var(--color-green-50);
  --status-success-text: var(--color-green-700);
  --status-warning: var(--color-amber-500);
  --status-warning-bg: var(--color-amber-50);
  --status-warning-text: var(--color-amber-700);
  --status-error: var(--color-red-500);
  --status-error-bg: var(--color-red-50);
  --status-error-text: var(--color-red-700);

  /* ===========================================
   * SEMANTIC TOKENS - Interactive States
   * =========================================== */
  --interactive-default: var(--color-gray-900);
  --interactive-hover: var(--color-gray-700);
  --interactive-active: var(--color-gray-800);
  --interactive-disabled: var(--color-gray-300);
  --interactive-focus: var(--color-green-500);

  /* ===========================================
   * SEMANTIC TOKENS - Effects
   * =========================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
  --transition-transform: transform 200ms ease-in-out;
  --transition-opacity: opacity 200ms ease-in-out;
  --transition-all: all 200ms ease-in-out;

  --opacity-disabled: 0.5;
  --opacity-hover: 0.9;
  --opacity-placeholder: 0.6;
  --opacity-overlay: 0.5;

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-backdrop: 8px;

  /* ===========================================
   * STITCH DESIGN SYSTEM - Special Effects
   * =========================================== */

  /* Grainy Texture Overlay */
  --stitch-grain-opacity: 0.12;
  --stitch-grain-size: 200px;
  --stitch-grain-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  /* Stitch Shadows */
  --stitch-shadow-sm: 0 2px 8px rgba(45, 45, 74, 0.08);
  --stitch-shadow-md: 0 4px 16px rgba(45, 45, 74, 0.12);
  --stitch-shadow-lg: 0 8px 32px rgba(45, 45, 74, 0.16);
  --stitch-shadow-golden: 0 4px 20px rgba(245, 197, 66, 0.25);

  /* Stitch Gradients */
  --stitch-gradient-lavender: linear-gradient(135deg, var(--stitch-lavender) 0%, var(--stitch-lavender-soft) 100%);
  --stitch-gradient-cream: linear-gradient(180deg, var(--stitch-cream) 0%, var(--stitch-cream-light) 100%);
  --stitch-gradient-dark: linear-gradient(180deg, var(--stitch-navy) 0%, var(--stitch-deep-purple) 100%);

  /* ===========================================
   * COMPONENT TOKENS - Button
   * =========================================== */

  /* Button Base */
  --button-font-family: var(--font-family-ui);
  --button-font-weight: var(--font-weight-medium);
  --button-transition: var(--transition-colors);

  /* Button Sizes */
  --button-sm-height: 32px;
  --button-sm-padding-x: var(--spacing-3);
  --button-sm-padding-y: var(--spacing-2);
  --button-sm-font-size: var(--font-size-xs);
  --button-sm-radius: var(--radius-full);

  --button-md-height: 36px;
  --button-md-padding-x: var(--spacing-4);
  --button-md-padding-y: var(--spacing-2);
  --button-md-font-size: var(--font-size-sm);
  --button-md-radius: var(--radius-full);

  --button-lg-height: 44px;
  --button-lg-padding-x: var(--spacing-6);
  --button-lg-padding-y: var(--spacing-3);
  --button-lg-font-size: var(--font-size-base);
  --button-lg-radius: var(--radius-full);

  /* Button Primary */
  --button-primary-bg: var(--color-green-500);
  --button-primary-bg-hover: var(--color-green-600);
  --button-primary-bg-active: var(--color-green-700);
  --button-primary-text: var(--color-white);
  --button-primary-border: var(--color-green-500);

  /* Button Secondary */
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-gray-50);
  --button-secondary-bg-active: var(--color-gray-100);
  --button-secondary-text: var(--color-gray-900);
  --button-secondary-border: var(--color-gray-900);

  /* Button Subtle */
  --button-subtle-bg: transparent;
  --button-subtle-bg-hover: var(--color-gray-100);
  --button-subtle-bg-active: var(--color-gray-200);
  --button-subtle-text: var(--color-gray-700);
  --button-subtle-border: transparent;

  /* ===========================================
   * COMPONENT TOKENS - Card
   * =========================================== */
  --card-bg: var(--bg-surface);
  --card-border-radius: var(--radius-none);
  --card-shadow: var(--shadow-none);

  /* Story Card */
  --card-story-padding-y: var(--spacing-6);
  --card-story-gap: var(--spacing-4);
  --card-story-border-bottom: 1px solid var(--color-gray-200);

  --card-story-title-font: var(--font-family-display);
  --card-story-title-size: var(--font-size-xl);
  --card-story-title-weight: var(--font-weight-bold);
  --card-story-title-color: var(--text-primary);

  --card-story-subtitle-font: var(--font-family-body);
  --card-story-subtitle-size: var(--font-size-base);
  --card-story-subtitle-color: var(--text-secondary);

  --card-story-thumbnail-width: 112px;
  --card-story-thumbnail-radius: var(--radius-xs);

  --card-story-meta-font: var(--font-family-ui);
  --card-story-meta-size: var(--font-size-sm);
  --card-story-meta-color: var(--text-tertiary);

  /* ===========================================
   * COMPONENT TOKENS - Header
   * =========================================== */
  --header-height: 57px;
  --header-bg: var(--bg-surface);
  --header-border-bottom: 1px solid var(--color-gray-200);
  --header-padding-x: var(--spacing-6);
  --header-z-index: 100;

  --header-logo-height: 25px;
  --header-nav-gap: var(--spacing-6);
  --header-nav-font: var(--font-family-ui);
  --header-nav-size: var(--font-size-sm);
  --header-nav-color: var(--text-secondary);
  --header-nav-color-hover: var(--text-primary);

  --header-avatar-size: 32px;

  --header-search-width: 240px;
  --header-search-height: 40px;
  --header-search-bg: var(--color-gray-50);
  --header-search-radius: var(--radius-full);

  /* ===========================================
   * COMPONENT TOKENS - Tag
   * =========================================== */
  --tag-font: var(--font-family-ui);
  --tag-radius: var(--radius-full);

  /* Tag Sizes */
  --tag-sm-height: 24px;
  --tag-sm-padding-x: var(--spacing-2);
  --tag-sm-font-size: var(--font-size-xs);

  --tag-md-height: 28px;
  --tag-md-padding-x: var(--spacing-3);
  --tag-md-font-size: var(--font-size-sm);

  --tag-lg-height: 36px;
  --tag-lg-padding-x: var(--spacing-4);
  --tag-lg-font-size: var(--font-size-sm);

  /* Tag Default Variant */
  --tag-default-bg: var(--color-gray-100);
  --tag-default-bg-hover: var(--color-gray-200);
  --tag-default-text: var(--text-secondary);
  --tag-default-text-hover: var(--text-primary);

  /* Tag Active Variant */
  --tag-active-bg: var(--text-primary);
  --tag-active-text: var(--color-white);

  /* Member Badge */
  --tag-member-bg: var(--color-amber-400);
  --tag-member-text: var(--color-white);

  /* ===========================================
   * COMPONENT TOKENS - Input
   * =========================================== */
  --input-font: var(--font-family-ui);
  --input-bg: var(--bg-surface);
  --input-color: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --input-border-width: 1px;
  --input-border-color: var(--border-default);
  --input-border-color-hover: var(--border-strong);
  --input-border-color-focus: var(--border-focus);
  --input-shadow-focus: var(--shadow-outline);

  /* Input Sizes */
  --input-sm-height: 36px;
  --input-sm-padding-x: var(--spacing-3);
  --input-sm-font-size: var(--font-size-sm);
  --input-sm-radius: var(--radius-sm);

  --input-md-height: 44px;
  --input-md-padding-x: var(--spacing-4);
  --input-md-font-size: var(--font-size-base);
  --input-md-radius: var(--radius-md);

  --input-lg-height: 52px;
  --input-lg-padding-x: var(--spacing-4);
  --input-lg-font-size: var(--font-size-md);
  --input-lg-radius: var(--radius-md);

  /* Input Label */
  --input-label-font-size: var(--font-size-sm);
  --input-label-font-weight: var(--font-weight-medium);
  --input-label-color: var(--text-primary);
  --input-label-margin-bottom: var(--spacing-2);

  /* Input Error */
  --input-error-border: var(--status-error);
  --input-error-text: var(--status-error);

  /* ===========================================
   * COMPONENT TOKENS - Article
   * =========================================== */
  --article-max-width: var(--container-article);
  --article-padding-x: var(--spacing-6);

  --article-title-font: var(--font-family-display);
  --article-title-size: var(--font-size-4xl);
  --article-title-weight: var(--font-weight-bold);
  --article-title-line-height: var(--line-height-tight);
  --article-title-color: var(--text-primary);

  --article-body-font: var(--font-family-body);
  --article-body-size: var(--font-size-lg);
  --article-body-line-height: var(--line-height-article);
  --article-body-color: var(--text-primary);

  --article-paragraph-margin: var(--spacing-6);

  --article-h2-font: var(--font-family-display);
  --article-h2-size: var(--font-size-2xl);
  --article-h2-weight: var(--font-weight-bold);
  --article-h2-margin-top: var(--spacing-10);
  --article-h2-margin-bottom: var(--spacing-4);

  --article-blockquote-border: 3px solid var(--text-primary);
  --article-blockquote-padding: var(--spacing-5);

  --article-code-font: var(--font-family-mono);
  --article-code-bg: var(--color-gray-50);
  --article-code-padding: var(--spacing-4);
  --article-code-radius: var(--radius-sm);

  /* ===========================================
   * COMPONENT TOKENS - Footer
   * =========================================== */
  --footer-bg: var(--bg-secondary);
  --footer-border-top: 1px solid var(--color-gray-200);
  --footer-padding-y: var(--spacing-6);
  --footer-padding-x: var(--spacing-6);

  --footer-link-font: var(--font-family-ui);
  --footer-link-size: var(--font-size-sm);
  --footer-link-color: var(--text-tertiary);
  --footer-link-color-hover: var(--text-secondary);

  /* ===========================================
   * COMPONENT TOKENS - Modal
   * =========================================== */
  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-backdrop-blur: var(--blur-backdrop);
  --modal-z-index: 1000;

  --modal-bg: var(--bg-surface);
  --modal-radius: var(--radius-sm);
  --modal-shadow: var(--shadow-xl);
  --modal-max-width: 678px;
  --modal-padding: var(--spacing-8);

  --modal-title-font: var(--font-family-display);
  --modal-title-size: var(--font-size-2xl);
  --modal-title-weight: var(--font-weight-bold);

  --modal-close-size: 32px;
  --modal-close-radius: var(--radius-full);
  --modal-close-bg-hover: var(--color-gray-100);

  /* ===========================================
   * COMPONENT TOKENS - Editor
   * =========================================== */
  --editor-max-width: var(--container-article);
  --editor-padding-x: var(--spacing-6);
  --editor-padding-y: var(--spacing-10);

  --editor-title-font: var(--font-family-display);
  --editor-title-size: var(--font-size-4xl);
  --editor-title-weight: var(--font-weight-bold);
  --editor-title-placeholder: var(--text-muted);

  --editor-content-font: var(--font-family-body);
  --editor-content-size: var(--font-size-lg);
  --editor-content-line-height: var(--line-height-article);
  --editor-min-height: 400px;

  --editor-toolbar-bg: var(--bg-surface);
  --editor-toolbar-border: 1px solid var(--color-gray-200);
  --editor-toolbar-radius: var(--radius-md);
  --editor-toolbar-shadow: var(--shadow-md);

  --editor-toolbar-button-size: 36px;
  --editor-toolbar-button-radius: var(--radius-sm);
  --editor-toolbar-button-bg-hover: var(--color-gray-100);
}

/* ===========================================
 * RESPONSIVE OVERRIDES
 * =========================================== */

@media (max-width: 768px) {
  :root {
    --header-padding-x: var(--spacing-4);
    --article-padding-x: var(--spacing-4);
    --article-title-size: var(--font-size-2xl);
    --article-body-size: var(--font-size-md);
    --card-story-title-size: var(--font-size-lg);
    --card-story-thumbnail-width: 80px;
    --editor-title-size: var(--font-size-2xl);
    --editor-content-size: var(--font-size-md);
  }
}

/* ===========================================
 * DARK MODE
 * =========================================== */

[data-theme="dark"] {
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-surface: var(--color-gray-900);
  --bg-surface-hover: var(--color-gray-800);
  --bg-muted: var(--color-gray-800);
  --bg-inverse: var(--color-white);

  --text-primary: var(--color-gray-100);
  --text-secondary: var(--color-gray-400);
  --text-tertiary: var(--color-gray-500);
  --text-muted: var(--color-gray-600);
  --text-inverse: var(--color-gray-900);

  --border-default: var(--color-gray-700);
  --border-muted: var(--color-gray-800);
  --border-strong: var(--color-gray-600);

  --card-story-border-bottom: 1px solid var(--color-gray-700);
  --header-border-bottom: 1px solid var(--color-gray-700);
  --footer-border-top: 1px solid var(--color-gray-700);
}

/* ===========================================
 * STITCH DARK MODE
 * =========================================== */

[data-theme="stitch-dark"] {
  /* Background Colors */
  --bg-primary: var(--stitch-deep-purple);
  --bg-secondary: var(--stitch-navy);
  --bg-surface: var(--stitch-deep-purple-light);
  --bg-surface-hover: var(--stitch-navy-light);
  --bg-muted: var(--stitch-navy-dark);
  --bg-inverse: var(--stitch-cream);
  --bg-accent: var(--stitch-lavender);
  --bg-accent-subtle: rgba(123, 123, 168, 0.15);
  --bg-accent-hover: var(--stitch-lavender-soft);

  /* Text Colors */
  --text-primary: var(--stitch-cream);
  --text-secondary: var(--stitch-lavender-soft);
  --text-tertiary: var(--stitch-lavender);
  --text-muted: var(--stitch-lavender-dark);
  --text-inverse: var(--stitch-deep-purple);
  --text-accent: var(--stitch-golden);
  --text-accent-hover: var(--stitch-golden-light);
  --text-link: var(--stitch-lavender-soft);
  --text-link-hover: var(--stitch-cream);

  /* Border Colors */
  --border-default: var(--stitch-navy-light);
  --border-muted: var(--stitch-navy-dark);
  --border-strong: var(--stitch-lavender-dark);
  --border-accent: var(--stitch-lavender);
  --border-focus: var(--stitch-golden);

  /* Component Overrides */
  --card-story-border-bottom: 1px solid var(--stitch-navy-light);
  --header-border-bottom: 1px solid var(--stitch-navy-light);
  --footer-border-top: 1px solid var(--stitch-navy-light);

  /* Shadows */
  --shadow-sm: var(--stitch-shadow-sm);
  --shadow-md: var(--stitch-shadow-md);
  --shadow-lg: var(--stitch-shadow-lg);
  --shadow-outline: 0 0 0 3px rgba(245, 197, 66, 0.2);

  /* Button Primary - Golden */
  --button-primary-bg: var(--stitch-golden);
  --button-primary-bg-hover: var(--stitch-golden-light);
  --button-primary-bg-active: var(--stitch-golden-dark);
  --button-primary-text: var(--stitch-deep-purple);
  --button-primary-border: var(--stitch-golden);

  /* Button Secondary - Lavender */
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: rgba(123, 123, 168, 0.15);
  --button-secondary-bg-active: rgba(123, 123, 168, 0.25);
  --button-secondary-text: var(--stitch-lavender-soft);
  --button-secondary-border: var(--stitch-lavender);

  /* Input */
  --input-bg: var(--stitch-navy-dark);
  --input-border-color: var(--stitch-navy-light);
  --input-border-color-hover: var(--stitch-lavender-dark);
  --input-border-color-focus: var(--stitch-golden);

  /* Tag */
  --tag-default-bg: var(--stitch-navy-light);
  --tag-default-bg-hover: var(--stitch-navy);
  --tag-default-text: var(--stitch-lavender-soft);
  --tag-active-bg: var(--stitch-lavender);
  --tag-active-text: var(--stitch-cream);

  /* Modal */
  --modal-bg: var(--stitch-navy);
  --modal-overlay-bg: rgba(26, 26, 46, 0.85);
}

/* ===========================================
 * STITCH LIGHT MODE
 * =========================================== */

[data-theme="stitch-light"] {
  /* Background Colors */
  --bg-primary: var(--stitch-cream-light);
  --bg-secondary: var(--stitch-cream);
  --bg-surface: var(--color-white);
  --bg-surface-hover: var(--stitch-cream);
  --bg-muted: var(--stitch-cream-dark);
  --bg-inverse: var(--stitch-navy);
  --bg-accent: var(--stitch-lavender);
  --bg-accent-subtle: rgba(123, 123, 168, 0.1);
  --bg-accent-hover: var(--stitch-lavender-dark);

  /* Text Colors */
  --text-primary: var(--stitch-navy);
  --text-secondary: var(--stitch-lavender-dark);
  --text-tertiary: var(--stitch-lavender);
  --text-muted: var(--stitch-lavender-soft);
  --text-inverse: var(--stitch-cream);
  --text-accent: var(--stitch-lavender);
  --text-accent-hover: var(--stitch-lavender-dark);
  --text-link: var(--stitch-lavender-dark);
  --text-link-hover: var(--stitch-navy);

  /* Border Colors */
  --border-default: var(--stitch-cream-dark);
  --border-muted: var(--stitch-cream);
  --border-strong: var(--stitch-lavender-soft);
  --border-accent: var(--stitch-lavender);
  --border-focus: var(--stitch-lavender);

  /* Component Overrides */
  --card-story-border-bottom: 1px solid var(--stitch-cream-dark);
  --header-border-bottom: 1px solid var(--stitch-cream-dark);
  --footer-border-top: 1px solid var(--stitch-cream-dark);

  /* Shadows */
  --shadow-sm: var(--stitch-shadow-sm);
  --shadow-md: var(--stitch-shadow-md);
  --shadow-lg: var(--stitch-shadow-lg);
  --shadow-outline: 0 0 0 3px rgba(123, 123, 168, 0.2);

  /* Button Primary - Lavender */
  --button-primary-bg: var(--stitch-lavender);
  --button-primary-bg-hover: var(--stitch-lavender-dark);
  --button-primary-bg-active: var(--stitch-navy);
  --button-primary-text: var(--color-white);
  --button-primary-border: var(--stitch-lavender);

  /* Button Secondary */
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--stitch-cream);
  --button-secondary-bg-active: var(--stitch-cream-dark);
  --button-secondary-text: var(--stitch-navy);
  --button-secondary-border: var(--stitch-navy);

  /* Input */
  --input-bg: var(--color-white);
  --input-border-color: var(--stitch-cream-dark);
  --input-border-color-hover: var(--stitch-lavender-soft);
  --input-border-color-focus: var(--stitch-lavender);

  /* Tag */
  --tag-default-bg: var(--stitch-cream);
  --tag-default-bg-hover: var(--stitch-cream-dark);
  --tag-default-text: var(--stitch-lavender-dark);
  --tag-active-bg: var(--stitch-lavender);
  --tag-active-text: var(--color-white);

  /* Modal */
  --modal-bg: var(--color-white);
  --modal-overlay-bg: rgba(45, 45, 74, 0.5);
}

/* ===========================================
 * STITCH GRAINY TEXTURE UTILITY CLASS
 * =========================================== */

.stitch-grain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--stitch-grain-url);
  background-size: var(--stitch-grain-size);
  opacity: var(--stitch-grain-opacity);
  pointer-events: none;
  z-index: 1;
}

.stitch-grain {
  position: relative;
}

.stitch-grain > * {
  position: relative;
  z-index: 2;
}