# Default Theme Configuration
# This file defines the visual design system for the application

[metadata]
name = "Default"
description = "Clean, modern design with blue accent colors"
version = "1.0.0"
author = "Rustelo Contributors"

[colors]
# Primary brand colors
primary = "#3b82f6"           # Blue-500
primary_hover = "#2563eb"     # Blue-600
secondary = "#6b7280"         # Gray-500
secondary_hover = "#4b5563"   # Gray-600
accent = "#f59e0b"            # Amber-500

# Semantic colors
success = "#10b981"           # Emerald-500
warning = "#f59e0b"           # Amber-500
error = "#ef4444"             # Red-500
info = "#06b6d4"              # Cyan-500

# Surface colors (backgrounds)
surface = "#ffffff"           # White
surface_dark = "#1f2937"      # Gray-800
surface_hover = "#f9fafb"     # Gray-50
surface_hover_dark = "#374151" # Gray-700

# Text colors
text = "#111827"              # Gray-900
text_dark = "#f9fafb"         # Gray-50
text_secondary = "#6b7280"    # Gray-500
text_secondary_dark = "#9ca3af" # Gray-400

# Border colors
border = "#e5e7eb"            # Gray-200
border_dark = "#374151"       # Gray-700

[typography]
# Font families
font_family_sans = "Inter, ui-sans-serif, system-ui, sans-serif"
font_family_mono = "JetBrains Mono, ui-monospace, 'Cascadia Code', monospace"

# Font sizes
font_size_xs = "0.75rem"      # 12px
font_size_sm = "0.875rem"     # 14px
font_size_base = "1rem"       # 16px
font_size_lg = "1.125rem"     # 18px
font_size_xl = "1.25rem"      # 20px
font_size_2xl = "1.5rem"      # 24px
font_size_3xl = "1.875rem"    # 30px

# Line heights
line_height_tight = "1.25"
line_height_normal = "1.5"
line_height_relaxed = "1.75"

[spacing]
# Spacing scale (rem units)
xs = "0.25rem"                # 4px
sm = "0.5rem"                 # 8px
md = "1rem"                   # 16px
lg = "1.5rem"                 # 24px
xl = "2rem"                   # 32px
"2xl" = "2.5rem"              # 40px
"3xl" = "3rem"                # 48px

[radius]
# Border radius values
sm = "0.25rem"                # 4px
md = "0.375rem"               # 6px
lg = "0.5rem"                 # 8px
xl = "0.75rem"                # 12px
"2xl" = "1rem"                # 16px
full = "9999px"               # Full rounded

[shadows]
# Shadow definitions
sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)"
base = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"

[components]
# Component-specific configurations

[components.button]
border_radius = "0.5rem"
padding_x_sm = "0.75rem"
padding_y_sm = "0.375rem"
padding_x_md = "1rem"
padding_y_md = "0.5rem"
padding_x_lg = "1.5rem"
padding_y_lg = "0.75rem"
font_weight = "500"
transition = "all 200ms ease-in-out"

[components.card]
border_radius = "0.75rem"
padding = "1.5rem"
shadow = "sm"
border_width = "1px"

[components.input]
border_radius = "0.375rem"
padding_x = "0.75rem"
padding_y = "0.5rem"
border_width = "1px"
transition = "border-color 200ms ease-in-out, box-shadow 200ms ease-in-out"

[components.navbar]
height = "4rem"
padding_x = "1rem"
backdrop_blur = "true"
border_bottom_width = "1px"

[components.footer]
padding_y = "2rem"
border_top_width = "1px"

[assets]
# Asset paths
logo_light = "/logos/site-logo-b.png"
logo_dark = "/logos/site-logo-w.png"
logo_icon = "/logos/logo-icon.svg"
favicon = "/images/favicon.ico"
favicon_dark = "/images/favicon.ico" #-dark.ico"

# Logo configuration
logo_height_sm = "2rem"
logo_height_md = "2.5rem"
logo_height_lg = "3rem"

[animations]
# Animation configurations
duration_fast = "150ms"
duration_normal = "200ms"
duration_slow = "300ms"
easing = "cubic-bezier(0.4, 0, 0.2, 1)"

[breakpoints]
# Responsive breakpoints
sm = "640px"
md = "768px"
lg = "1024px"
xl = "1280px"
"2xl" = "1536px"