/* ================================================================
   Cabinet Central — Design System
   Custom properties · Reset · Typography · Layout utilities
   ================================================================ */

:root {
    /* ---- Brand colours (confirm with Tim / brand guide) ---- */
    --cc-primary:    #2b4a3e;   /* Deep forest green  */
    --cc-accent:     #c9a96e;   /* Warm wood / gold   */
    --cc-wood:       #8b5e3c;   /* Cabinet wood brown */
    --cc-warm:       #f5f0e8;   /* Off-white bg       */
    --cc-warm-dark:  #d4cabb;   /* Warm mid tone      */
    --cc-mid:        #6b7280;   /* Mid grey           */
    --cc-dark:       #1a1a1a;   /* Near black         */
    --cc-light:      #ffffff;
    --cc-error:      #c0392b;
    --cc-success:    #27ae60;

    /* ---- Typography ---- */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ---- Spacing scale ---- */
    --space-xs:  0.25rem;   /*  4px */
    --space-sm:  0.5rem;    /*  8px */
    --space-md:  1rem;      /* 16px */
    --space-lg:  1.5rem;    /* 24px */
    --space-xl:  2rem;      /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 5rem;      /* 80px */

    /* ---- Layout ---- */
    --max-width:     1200px;
    --header-height: 70px;
    --panel-width:   580px;

    /* ---- Transitions ---- */
    --ease-fast:   150ms ease;
    --ease-normal: 300ms ease;
    --ease-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Radius ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.16);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family:      var(--font-body);
    font-size:        1rem;
    line-height:      1.6;
    color:            var(--cc-dark);
    background-color: var(--cc-warm);
    min-height:       100vh;
}
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: var(--cc-primary); }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }

/* ---- Utility ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }

/* ---- Buttons ---- */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-sm);
    padding:         0.6rem 1.4rem;
    border-radius:   var(--radius-sm);
    font-weight:     600;
    font-size:       0.95rem;
    text-decoration: none;
    transition:      background var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
    white-space:     nowrap;
}
.btn-primary {
    background: var(--cc-primary);
    color:      var(--cc-light);
}
.btn-primary:hover {
    background:      color-mix(in srgb, var(--cc-primary) 85%, black);
    text-decoration: none;
}
.btn-accent {
    background: var(--cc-accent);
    color:      var(--cc-dark);
}
.btn-accent:hover {
    background:      color-mix(in srgb, var(--cc-accent) 85%, black);
    text-decoration: none;
}

/* ---- Form elements ---- */
.form-group { margin-bottom: var(--space-md); }
.form-label {
    display:       block;
    font-weight:   600;
    font-size:     0.875rem;
    margin-bottom: var(--space-xs);
    color:         var(--cc-mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.form-input,
.form-textarea {
    width:         100%;
    padding:       0.65rem var(--space-md);
    border:        2px solid var(--cc-warm-dark);
    border-radius: var(--radius-sm);
    font-size:     1rem;
    background:    var(--cc-light);
    color:         var(--cc-dark);
    transition:    border-color var(--ease-fast);
}
.form-input:focus,
.form-textarea:focus {
    outline:       none;
    border-color:  var(--cc-primary);
}
.form-textarea { resize: vertical; min-height: 120px; }

/* ---- Header ---- */
.site-header {
    position:   fixed;
    top: 0; left: 0; right: 0;
    height:     var(--header-height);
    background: var(--cc-primary);
    z-index:    100;
    box-shadow: var(--shadow-md);
}
.header-inner {
    max-width:   var(--max-width);
    margin:      0 auto;
    height:      100%;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     0 var(--space-lg);
    gap:         var(--space-md);
}
.header-tagline {
    color:      rgba(255,255,255,.5);
    font-size:  0.8rem;
    flex:       1;
    text-align: center;
}
.header-phone {
    color:           var(--cc-accent);
    font-weight:     700;
    font-size:       1rem;
    text-decoration: none;
    white-space:     nowrap;
}
.header-phone:hover { color: var(--cc-light); text-decoration: none; }

/* ---- Footer ---- */
.site-footer {
    background:  var(--cc-dark);
    color:       var(--cc-mid);
    text-align:  center;
    padding:     var(--space-2xl) var(--space-lg);
    font-size:   0.875rem;
    line-height: 2;
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-logo { color: var(--cc-light); font-size: 1rem; margin-bottom: var(--space-sm); }
.footer-copy { margin-top: var(--space-lg); font-size: 0.8rem; color: rgba(255,255,255,.3); }
.site-footer a { color: var(--cc-accent); }