# Design System Configuration
# Comprehensive design tokens for full abstraction

[metadata]
name = "Design System"
description = "Complete design system with full abstraction for colors, spacing, typography, and components"
version = "2.0.0"
author = "Rustelo Contributors"

# Responsive breakpoints (mobile-first)
[breakpoints]
xs = "320px"    # Extra small mobile
sm = "640px"    # Small mobile/large mobile
md = "768px"    # Tablet portrait
lg = "1024px"   # Tablet landscape/small desktop
xl = "1280px"   # Desktop
xxl = "1536px"  # Large desktop

# Color system with semantic meaning
[colors]
# Brand colors
brand_primary = "#3b82f6"
brand_secondary = "#6366f1"
brand_accent = "#f59e0b"

# Semantic colors - light theme
success = "#10b981"
warning = "#f59e0b"
error = "#ef4444"
info = "#06b6d4"

# Neutral scale - light theme
neutral_50 = "#f9fafb"
neutral_100 = "#f3f4f6"
neutral_200 = "#e5e7eb"
neutral_300 = "#d1d5db"
neutral_400 = "#9ca3af"
neutral_500 = "#6b7280"
neutral_600 = "#4b5563"
neutral_700 = "#374151"
neutral_800 = "#1f2937"
neutral_900 = "#111827"
neutral_950 = "#030712"

# Dark theme colors
[colors.dark]
# Brand colors (same as light for consistency)
brand_primary = "#60a5fa"
brand_secondary = "#818cf8"
brand_accent = "#fbbf24"

# Semantic colors - dark theme
success = "#34d399"
warning = "#fbbf24"
error = "#f87171"
info = "#22d3ee"

# Neutral scale - dark theme (inverted)
neutral_50 = "#030712"
neutral_100 = "#111827"
neutral_200 = "#1f2937"
neutral_300 = "#374151"
neutral_400 = "#4b5563"
neutral_500 = "#6b7280"
neutral_600 = "#9ca3af"
neutral_700 = "#d1d5db"
neutral_800 = "#e5e7eb"
neutral_900 = "#f3f4f6"
neutral_950 = "#f9fafb"

# Typography system
[typography]
# Font families
font_sans = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
font_serif = "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
font_mono = "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace"

# Font sizes (mobile-first)
text_xs = "0.75rem"     # 12px
text_sm = "0.875rem"    # 14px  
text_base = "1rem"      # 16px
text_lg = "1.125rem"    # 18px
text_xl = "1.25rem"     # 20px
text_2xl = "1.5rem"     # 24px
text_3xl = "1.875rem"   # 30px
text_4xl = "2.25rem"    # 36px
text_5xl = "3rem"       # 48px
text_6xl = "3.75rem"    # 60px

# Font weights
font_thin = "100"
font_light = "300"
font_normal = "400"
font_medium = "500"
font_semibold = "600"
font_bold = "700"
font_extrabold = "800"
font_black = "900"

# Line heights
leading_none = "1"
leading_tight = "1.25"
leading_snug = "1.375"
leading_normal = "1.5"
leading_relaxed = "1.625"
leading_loose = "2"

# Spacing system
[spacing]
# Base spacing scale
space_0 = "0"
space_px = "1px"
space_0_5 = "0.125rem"  # 2px
space_1 = "0.25rem"     # 4px
space_1_5 = "0.375rem"  # 6px
space_2 = "0.5rem"      # 8px
space_2_5 = "0.625rem"  # 10px
space_3 = "0.75rem"     # 12px
space_3_5 = "0.875rem"  # 14px
space_4 = "1rem"        # 16px
space_5 = "1.25rem"     # 20px
space_6 = "1.5rem"      # 24px
space_7 = "1.75rem"     # 28px
space_8 = "2rem"        # 32px
space_9 = "2.25rem"     # 36px
space_10 = "2.5rem"     # 40px
space_11 = "2.75rem"    # 44px
space_12 = "3rem"       # 48px
space_14 = "3.5rem"     # 56px
space_16 = "4rem"       # 64px
space_20 = "5rem"       # 80px
space_24 = "6rem"       # 96px
space_28 = "7rem"       # 112px
space_32 = "8rem"       # 128px
space_36 = "9rem"       # 144px
space_40 = "10rem"      # 160px
space_44 = "11rem"      # 176px
space_48 = "12rem"      # 192px
space_52 = "13rem"      # 208px
space_56 = "14rem"      # 224px
space_60 = "15rem"      # 240px
space_64 = "16rem"      # 256px
space_72 = "18rem"      # 288px
space_80 = "20rem"      # 320px
space_96 = "24rem"      # 384px

# Border radius
[radius]
radius_none = "0"
radius_sm = "0.125rem"   # 2px
radius_base = "0.25rem"  # 4px
radius_md = "0.375rem"   # 6px
radius_lg = "0.5rem"     # 8px
radius_xl = "0.75rem"    # 12px
radius_2xl = "1rem"      # 16px
radius_3xl = "1.5rem"    # 24px
radius_full = "9999px"

# Shadows
[shadows]
shadow_none = "none"
shadow_sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)"
shadow_base = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
shadow_md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
shadow_lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
shadow_xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
shadow_2xl = "0 25px 50px -12px rgb(0 0 0 / 0.25)"
shadow_inner = "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"

# Z-index layers
[z_index]
z_hide = "-1"
z_auto = "auto"
z_0 = "0"
z_10 = "10"
z_20 = "20"
z_30 = "30"
z_40 = "40"
z_50 = "50"

# Component-specific configurations
[components]

# Button variants
[components.button]
border_radius = "radius_md"
font_weight = "font_medium"
transition = "all 0.2s ease-in-out"

[components.button.sizes]
sm = { padding_x = "space_3", padding_y = "space_1_5", font_size = "text_sm" }
md = { padding_x = "space_4", padding_y = "space_2", font_size = "text_sm" }
lg = { padding_x = "space_6", padding_y = "space_3", font_size = "text_base" }

[components.button.variants]
primary = { bg = "brand_primary", text = "neutral_50", hover_bg = "brand_primary" }
secondary = { bg = "neutral_200", text = "neutral_900", hover_bg = "neutral_300" }
ghost = { bg = "transparent", text = "neutral_700", hover_bg = "neutral_100" }
danger = { bg = "error", text = "neutral_50", hover_bg = "error" }

# Card component
[components.card]
background = "neutral_50"
border = "neutral_200"  
border_radius = "radius_lg"
shadow = "shadow_sm"
padding = "space_6"

[components.card.dark]
background = "neutral_900"
border = "neutral_700"

# Input component
[components.input]
background = "neutral_50"
border = "neutral_300"
border_radius = "radius_md"
padding_x = "space_3"
padding_y = "space_2"
font_size = "text_sm"
focus_border = "brand_primary"

[components.input.dark]
background = "neutral_800"
border = "neutral_600"

# Navigation component
[components.nav]
background = "neutral_50"
border = "neutral_200"
link_color = "neutral_600"
link_hover = "brand_primary"
active_color = "brand_primary"

[components.nav.dark]
background = "neutral_900"
border = "neutral_700"
link_color = "neutral_400"

# Footer component
[components.footer]
background = "neutral_100"
text_color = "neutral_600"
link_color = "neutral_500"
link_hover = "brand_primary"

[components.footer.dark]
background = "neutral_800"
text_color = "neutral_400"
link_color = "neutral_500"

# Responsive design tokens
[responsive]
# Container max widths
container_sm = "640px"
container_md = "768px"
container_lg = "1024px"
container_xl = "1280px"
container_2xl = "1536px"

# Grid system
grid_columns = "12"
grid_gap = "space_6"

# Mobile-first spacing adjustments
[responsive.spacing]
mobile = { padding = "space_4", margin = "space_2" }
tablet = { padding = "space_6", margin = "space_4" }
desktop = { padding = "space_8", margin = "space_6" }

# Typography scaling
[responsive.typography]
mobile = { scale = "0.875", line_height = "1.4" }
tablet = { scale = "1", line_height = "1.5" }
desktop = { scale = "1.125", line_height = "1.6" }