{
    "design_system": {
        "name": "Cortex Luminance System",
        "description": "A physics-based design system combining soft aesthetic minimalism with strict luminance layering. It relies on lighting simulation (top highlights, bottom shadows) rather than diverse hues to create depth hierarchy.",
        "version": "1.0.0",
        "mode": "light",
        "philosophy": {
            "core_principle": "Depth through Luminance",
            "lighting_source": "Top-down (90 degrees)",
            "surface_material": "Matte white & Soft Glass",
            "accent_strategy": "Functional Purple (oklch 0.65 0.22 290)",
            "layering_logic": "Higher elevation = Higher lightness (or pure white) + Stronger Shadow. Lower elevation = Lower lightness + Inset Shadow."
        }
    },
    "tokens": {
        "colors": {
            "primitives": {
                "base_hue": "270 (Purple/Violet)",
                "neutral_hue": "265 (Cool Gray)"
            },
            "layers": {
                "bg_root": {
                    "value": "linear-gradient(135deg, oklch(0.95 0.02 270) 0%, oklch(0.92 0.03 290) 100%)",
                    "description": "Level 0: The ambient canvas. Corresponds to the blurry cloud/gradient background."
                },
                "bg_layer_1": {
                    "value": "oklch(0.99 0.005 265)",
                    "description": "Level 1: The main application window/sidebar surface. Almost white."
                },
                "bg_layer_2": {
                    "value": "oklch(1.0 0 0)",
                    "description": "Level 2: Cards, Floating Inputs, Modals. Pure White."
                },
                "bg_sunken": {
                    "value": "oklch(0.96 0.01 265)",
                    "description": "For inset elements (search bars, progress tracks). Slightly darker than layer 1 to simulate depth."
                }
            },
            "text": {
                "primary": "oklch(0.20 0.02 265)",
                "secondary": "oklch(0.55 0.03 265)",
                "accent": "oklch(0.65 0.22 290)"
            },
            "borders": {
                "subtle": "rgba(0, 0, 0, 0.06)",
                "highlight": "rgba(255, 255, 255, 0.8)"
            }
        },
        "typography": {
            "font_family": "Inter, SF Pro Display, system-ui, sans-serif",
            "weights": {
                "regular": 400,
                "medium": 500,
                "semibold": 600
            },
            "scale": {
                "h1": {
                    "size": "32px",
                    "weight": 600,
                    "letter_spacing": "-0.02em"
                },
                "h2": {
                    "size": "24px",
                    "weight": 500,
                    "letter_spacing": "-0.01em"
                },
                "body_lg": {
                    "size": "16px",
                    "weight": 400
                },
                "body_sm": {
                    "size": "14px",
                    "weight": 400
                },
                "caption": {
                    "size": "12px",
                    "weight": 500,
                    "uppercase": false
                }
            }
        },
        "spacing": {
            "xs": "4px",
            "sm": "8px",
            "md": "16px",
            "lg": "24px",
            "xl": "32px",
            "container_padding": "20px"
        },
        "radii": {
            "sm": "8px",
            "md": "12px",
            "lg": "16px",
            "full": "9999px (Pill)"
        },
        "shadows": {
            "note": "Shadows must imply a top-down light source. Always pair drop-shadows with top-edge inset highlights.",
            "elevation_low": {
                "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.05)",
                "use_case": "Interactive buttons, list items."
            },
            "elevation_medium": {
                "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
                "use_case": "Standard Cards (Saved Prompts, Suggestions)."
            },
            "elevation_high": {
                "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)",
                "use_case": "Floating Input Area, Modals."
            },
            "inset_sunken": {
                "css_value": "box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(255, 255, 255, 0.5)",
                "use_case": "Search bars, tracks, unselected states."
            }
        }
    },
    "components": {
        "layout_structure": {
            "sidebar": {
                "width": "260px",
                "background": "bg_layer_1",
                "border_right": "1px solid borders.subtle",
                "padding": "md",
                "style": "Flat surface, low contrast."
            },
            "main_area": {
                "background": "bg_layer_2 (with large rounded corners) OR transparent over bg_root",
                "layout": "Flex-col, centered content, maximum width 900px."
            }
        },
        "buttons": {
            "primary": {
                "bg": "black (or dark purple)",
                "text": "white",
                "radius": "md",
                "shadow": "elevation_low",
                "lighting": "Subtle top gradient (lighter top) to show curvature."
            },
            "ghost": {
                "bg": "transparent",
                "hover_bg": "rgba(0,0,0,0.04)",
                "text": "text.secondary"
            },
            "new_chat": {
                "style": "Pill shape / Full radius",
                "bg": "#1A1A1A",
                "text": "white",
                "icon": "plus"
            }
        },
        "cards": {
            "prompt_card": {
                "bg": "bg_layer_2",
                "radius": "lg",
                "shadow": "elevation_medium",
                "border": "1px solid borders.subtle",
                "hover": "Transform Y -2px, increase shadow to elevation_high."
            }
        },
        "inputs": {
            "search_bar": {
                "style": "Sunken / Inset",
                "bg": "bg_sunken",
                "shadow": "inset_sunken",
                "radius": "md",
                "icon_color": "text.secondary"
            },
            "main_prompt_area": {
                "style": "Elevated Container",
                "bg": "white",
                "shadow": "elevation_high",
                "radius": "lg",
                "border": "1px solid rgba(0,0,0,0.04)"
            }
        },
        "navigation_items": {
            "base_style": "text.secondary, font-medium, md padding",
            "active_state": {
                "bg": "bg_layer_2",
                "text": "text.primary",
                "shadow": "elevation_low",
                "radius": "sm"
            }
        }
    }
}