/* ============================================
 *  MAIN.CSS - Estilos base y variables
 *  ============================================ */

:root {
    --green:      #3d9970;
    --green-dim:  #2e7d5a;
    --green-pale: #e8f5ef;
    --green-mist: rgba(61,153,112,0.10);

    --bg:         #f9f9f7;
    --bg2:        #f0f0ec;
    --bg3:        #e8e8e2;
    --surface:    #ffffff;

    --border:     #ddddd6;
    --border-mid: #c8c8c0;

    --text:       #383a42;
    --text-soft:  #696c77;
    --text-muted: #9da0a7;
    --text-dim:   #c2c4c9;

    --syntax-red:    #e45649;
    --syntax-orange: #d19a66;
    --syntax-blue:   #4078f2;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    --mono:    'DM Mono', monospace;
    --sans:    'DM Sans', sans-serif;
    --display: 'Fraunces', serif;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero divider */
.hero-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 0;
}