/* * THEME: Modern Rustic Utility
 * AUTHOR: TinyCalc Design Agent
 * FILE: skin.css (Nuclear Override Mirror)
 */

/* --- 1. FONTS & VARIABLES --- */

:root {
    /* Palette - Earthy & Technical */
    --c-bg-app: #FAF9F6;       /* Birch Paper */
    --c-bg-card: #FFFFFF;      /* Clean White */
    --c-bg-input: #FFFFFF;
    
    --c-text-primary: #292524; /* Warm Charcoal */
    --c-text-secondary: #57534E; /* Stone */
    --c-text-muted: #A8A29E;
    
    --c-brand: #D97706;        /* Toolbox Amber */
    --c-brand-hover: #B45309;
    
    --c-scenario-a: #0284C7;   /* Blueprint Blue */
    --c-scenario-a-bg: #E0F2FE;
    --c-scenario-a-border: #BAE6FD;

    --c-scenario-b: #059669;   /* Forest Sage */
    --c-scenario-b-bg: #D1FAE5;
    --c-scenario-b-border: #A7F3D0;

    --c-border: #E5E7EB;
    --c-border-focus: #D97706;

    /* Typography */
    --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Spacing & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* --- CORE MAPPING (The Bridge) --- */
    /* We map Core's semantic names to our Skin's palette */
    
    --color-primary: var(--c-brand);
    --color-primary-hover: var(--c-brand-hover);
    /* Manually deriving a subtle amber background since we don't have a brand-subtle var */
    --color-primary-subtle: #FFFBEB; /* Amber-50 */
    
    --color-secondary: var(--c-scenario-b); /* Green */
    --color-secondary-subtle: var(--c-scenario-b-bg);

    /* Accent can stay Amber or be mapped to something else if needed */
    --color-accent: var(--c-brand); 

    --color-text-main: var(--c-text-primary);
    --color-text-sub: var(--c-text-secondary);

    --color-bg-app: var(--c-bg-app);
    --color-bg-card: var(--c-bg-card);
    --color-border: var(--c-border);

    --radius-card: var(--radius-lg);
    --radius-input: var(--radius-md);

    /* Fonts */
    --font-heading: var(--font-heading);
    --font-body: var(--font-heading); /* Skin uses Manrope for everything */
}

/* --- 2. GLOBAL OVERRIDES (Important!) --- */

body {
    background-color: var(--c-bg-app) !important;
    color: var(--c-text-primary) !important;
    font-family: var(--font-heading) !important;
    padding: 20px;
    margin: 0;
}

/* Force headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--c-text-primary) !important;
    letter-spacing: -0.02em !important;
}

/* --- 3. INPUTS (Nuclear Selectors) --- */

/* We use body prefix to increase specificity */
body input, 
body select, 
body textarea, 
body .input-field {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--c-border) !important;
    background-color: var(--c-bg-input) !important;
    color: var(--c-text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    margin-bottom: 0.5rem !important;
    box-shadow: none !important; /* Reset core shadows */
}

body input:focus, 
body select:focus, 
body textarea:focus, 
body .input-field:focus {
    outline: none !important;
    border-color: var(--c-brand) !important;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15) !important;
}

/* Labels */
body label, 
body .input-label {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--c-text-secondary) !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}

/* --- 4. SCENARIOS --- */

/* Scenario A */
body .scenario-header-a { 
    border-bottom: 3px solid var(--c-scenario-a) !important; 
    color: var(--c-scenario-a) !important;
    font-family: var(--font-mono) !important;
    margin-bottom: 1rem !important;
}
body .scenario-box-a { 
    background-color: var(--c-scenario-a-bg) !important; 
    border: 1px solid var(--c-scenario-a-border) !important; 
    border-radius: var(--radius-md) !important;
    padding: 1.5rem !important;
}

/* Scenario B */
body .scenario-header-b { 
    border-bottom: 3px solid var(--c-scenario-b) !important; 
    color: var(--c-scenario-b) !important; 
    font-family: var(--font-mono) !important;
    margin-bottom: 1rem !important;
}
body .scenario-box-b { 
    background-color: var(--c-scenario-b-bg) !important; 
    border: 1px solid var(--c-scenario-b-border) !important; 
    border-radius: var(--radius-md) !important;
    padding: 1.5rem !important;
}

/* --- 5. BUTTONS & UI --- */

body button {
    background-color: var(--c-brand) !important;
    color: white !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 24px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

body button:hover {
    background-color: var(--c-brand-hover) !important;
}

/* Fix links */
body a {
    color: var(--c-brand) !important;
}