/* ===== GARDEN THEME ===== */
/* Warm, organic, trustworthy — cream neutrals, sage green accent, dusty rose secondary */
/* Rounded but restrained — soft shadows, generous breathing room */

:root {
    /* ===== GARDEN PALETTE ===== */
    --garden-cream:      #FAF7F2;
    --garden-linen:      #F3EDE4;
    --garden-stone:      #E8E0D4;
    --garden-clay:       #C4B8A8;
    --garden-earth:      #8B7E6E;
    --garden-bark:       #5C5144;
    --garden-charcoal:   #3A3330;

    --garden-sage:       #7A9B76;
    --garden-sage-light: #A3C09F;
    --garden-sage-dark:  #5B7A57;
    --garden-sage-pale:  #E8F0E7;

    --garden-rose:       #C4887A;
    --garden-rose-light: #E2B5AA;
    --garden-rose-pale:  #F5EAE7;

    --garden-gold:       #B8975A;
    --garden-gold-light: #D4B97A;

    /* ===== GARDEN FONTS ===== */
    --font-heading: 'Ysabeau-Office', 'Noto-Sans', sans-serif;
    --font-content: 'Ysabeau-Office', 'Noto-Sans', sans-serif;
    --font-ux: 'Ysabeau-Office', 'Noto-Sans', sans-serif;

    /* ===== CORE THEME COLORS ===== */
    --color-primary:   var(--garden-charcoal);
    --color-secondary: var(--garden-bark);
    --color-tertiary:  var(--garden-earth);
    --color-disabled:  var(--garden-clay);

    /* ===== BACKGROUNDS ===== */
    --bg-primary:   var(--garden-cream);
    --bg-secondary: var(--garden-linen);
    --bg-tertiary:  var(--garden-stone);
    --bg-inverse:   var(--garden-charcoal);
    --bg-pop:       var(--garden-sage);

    /* ===== BORDERS ===== */
    --border-primary:   var(--garden-clay);
    --border-secondary: var(--garden-stone);
    --border-emphasis:  var(--garden-bark);
    --border-muted:     var(--garden-linen);

    /* ===== STATUS COLORS ===== */
    --color-success:       #4A7A48;
    --color-success-light: #E8F0E7;
    --color-success-dark:  #3A6138;

    --color-warning:       #C4956A;
    --color-warning-light: #F5EBE0;
    --color-warning-dark:  #A67B4F;

    --color-error:       #C4625A;
    --color-error-light: #F5E0DE;
    --color-error-dark:  #A8483F;

    --color-info:       #6A8FA0;
    --color-info-light: #E4EEF2;
    --color-info-dark:  #4F7585;

    /* RGB versions */
    --color-primary-rgb: 58, 51, 48;
    --color-white-rgb:   250, 247, 242;

    /* ===== INTERACTIVE STATES ===== */
    --color-hover:  var(--garden-sage-dark);
    --bg-hover:     var(--garden-sage-pale);
    --color-active: var(--garden-charcoal);
    --bg-active:    var(--garden-stone);
    --color-focus:  var(--garden-sage);

    --focus-ring-color:  var(--garden-sage);
    --focus-ring-width:  2px;
    --focus-ring-offset: 2px;

    /* ===== LINKS ===== */
    --link-color:   var(--garden-sage-dark);
    --link-hover:   var(--garden-sage);
    --link-visited: var(--garden-earth);
    --link-active:  var(--garden-charcoal);

    /* ===== OVERLAYS ===== */
    --overlay-color: rgba(58, 51, 48, 0.5);
    --overlay-light: rgba(58, 51, 48, 0.3);
    --overlay-heavy: rgba(58, 51, 48, 0.75);

    --glass-bg:       rgba(250, 247, 242, 0.92);
    --glass-border:   rgba(196, 184, 168, 0.3);
    --glass-blur:     14px;
    --glass-saturate: 160%;
    --glass-shadow:   0 4px 20px rgba(58, 51, 48, 0.08);

    /* ===== DECORATIONS ===== */
    --radius-none: 0;
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-full: 9999px;

    --shadow-none: none;
    --shadow-sm:   0 1px 3px rgba(58, 51, 48, 0.06);
    --shadow-md:   0 3px 8px rgba(58, 51, 48, 0.08);
    --shadow-lg:   0 8px 20px rgba(58, 51, 48, 0.10);
    --shadow-xl:   0 16px 32px rgba(58, 51, 48, 0.12);

    /* ===== COMPONENT TOKENS ===== */

    /* Header */
    --header-bg:     var(--garden-cream);
    --header-border: var(--garden-stone);
    --header-text:   var(--garden-charcoal);
    --logo-text:     var(--garden-bark);

    /* Navigation */
    --nav-bg:          var(--bg-primary);
    --nav-text:        var(--color-primary);
    --nav-hover-bg:    var(--bg-hover);
    --nav-hover-text:  var(--garden-sage-dark);
    --nav-active-bg:   var(--bg-active);
    --nav-active-text: var(--garden-charcoal);

    /* Cards */
    --card-bg:          var(--garden-cream);
    --card-border:      var(--garden-clay);
    --card-shadow:      var(--shadow-md);
    --card-radius:      var(--radius-lg);
    --card-hover-border: var(--garden-sage);

    /* Wall header */
    --wall-header-bg:            var(--glass-bg);
    --wall-header-shadow:        var(--shadow-lg);
    --wall-header-pills:         var(--garden-sage-pale);
    --wall-header-toggle-option: var(--garden-sage-pale);

    /* Forms */
    --form-bg:           var(--garden-cream);
    --form-border:       var(--garden-clay);
    --form-text:         var(--garden-charcoal);
    --form-placeholder:  var(--garden-earth);
    --form-focus-border: var(--garden-sage);
    --form-focus-ring:   var(--garden-sage);
    --form-radius:       var(--radius-md);
    --form-disabled-bg:  var(--garden-linen);
    --form-disabled-text: var(--garden-clay);

    /* Buttons - Primary (sage green) */
    --btn-primary-bg:         var(--garden-sage);
    --btn-primary-text:       #ffffff;
    --btn-primary-border:     var(--garden-sage);
    --btn-primary-hover-bg:   var(--garden-sage-dark);
    --btn-primary-hover-text: #ffffff;

    /* Buttons - Secondary (outlined) */
    --btn-secondary-bg:         transparent;
    --btn-secondary-text:       var(--garden-sage-dark);
    --btn-secondary-border:     var(--garden-sage);
    --btn-secondary-hover-bg:   var(--garden-sage-pale);
    --btn-secondary-hover-text: var(--garden-sage-dark);

    /* Buttons - Danger */
    --btn-danger-bg:       var(--color-error);
    --btn-danger-text:     #ffffff;
    --btn-danger-border:   var(--color-error);
    --btn-danger-hover-bg: var(--color-error-dark);

    /* Buttons - Accent pill */
    --btn-pill: var(--garden-sage-pale);

    /* Messages */
    --message-success-bg:     var(--color-success-light);
    --message-success-border: var(--color-success);
    --message-success-text:   var(--color-success-dark);
    --message-warning-bg:     var(--color-warning-light);
    --message-warning-border: var(--color-warning);
    --message-warning-text:   var(--color-warning-dark);
    --message-error-bg:       var(--color-error-light);
    --message-error-border:   var(--color-error);
    --message-error-text:     var(--color-error-dark);
    --message-info-bg:        var(--color-info-light);
    --message-info-border:    var(--color-info);
    --message-info-text:      var(--color-info-dark);

    /* Footer */
    --footer-bg:     var(--garden-linen);
    --footer-text:   var(--garden-bark);
    --footer-border: var(--garden-stone);

    /* Panels */
    --panel-bg:     var(--glass-bg);
    --panel-border: var(--glass-border);
    --panel-shadow: var(--glass-shadow);
    --panel-blur:   var(--glass-blur);

    /* Tables */
    --table-header-bg: var(--garden-linen);
    --table-border:    var(--garden-clay);
    --table-stripe-bg: var(--garden-linen);
    --table-hover-bg:  var(--garden-sage-pale);

    /* Badges */
    --badge-bg:     var(--garden-sage);
    --badge-text:   #ffffff;
    --badge-border: var(--garden-sage);

    /* Dividers */
    --divider-color: var(--garden-clay);
    --divider-muted: var(--garden-stone);

    /* Duplicate stacking */
    --duplicate-outline: var(--garden-sage-dark);
    --duplicate-fill:    var(--garden-linen);

    /* Theme selector */
    --theme-option-border:       var(--garden-clay);
    --theme-option-active-border: var(--garden-sage);
    --theme-option-active-bg:    var(--garden-sage-pale);
}

/* ===== GARDEN THEME GLOBAL STYLES ===== */

body {
    font-family: var(--font-content);
    color: var(--color-primary);
    background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--garden-charcoal);
}

.btn, input, label, select, textarea, nav, .form__label {
    font-family: var(--font-ux);
}

code, pre {
    font-family: 'Noto-Sans-Mono', monospace;
}

img:not([src*=".svg"]) {
    border-radius: var(--radius-sm);
}

.card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn {
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(122, 155, 118, 0.15);
}

::selection {
    background-color: var(--garden-sage-pale);
    color: var(--garden-charcoal);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--garden-linen);
}

::-webkit-scrollbar-thumb {
    background: var(--garden-clay);
    border: 2px solid var(--garden-linen);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--garden-earth);
}

html {
    scrollbar-color: var(--garden-clay) var(--garden-linen);
}