/* ============================================
   Badwater — CSS Custom Properties
   Warm Light Palette (Canyon-inspired)
   ============================================ */

:root {
    /* Warm light palette */
    --color-bg:           #F7F3EE;
    --color-bg-elevated:  #FFFFFF;
    --color-text:         #2A2520;
    --color-text-muted:   #8B7E6E;
    --color-sandstone:    #A89880;
    --color-terracotta:   #B84A28;
    --color-sienna:       #943D22;
    --color-slate:        #5A7D94;

    /* Borders and dividers */
    --color-border:       rgba(42, 37, 32, 0.08);
    --color-border-strong: rgba(42, 37, 32, 0.15);

    /* Connection map tiers */
    --color-direct:       var(--color-terracotta);
    --color-near:         rgba(139, 126, 110, 0.7);
    --color-distant:      rgba(139, 126, 110, 0.35);

    /* Typography — Ghost Brand editor injects heading/body fonts via ghost_head */
    --font-headline:      var(--gh-font-heading, Georgia, 'Times New Roman', serif);
    --font-body:          var(--gh-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    /* Sizing */
    --content-width:      720px;
    --content-wide:       960px;
    --site-padding:       clamp(1.25rem, 4vw, 3rem);

    /* Transitions */
    --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-base:    200ms var(--ease-out);
    --transition-slow:    500ms var(--ease-out);

    /* Shadows */
    --shadow-card:        0 1px 3px rgba(42, 37, 32, 0.06), 0 0 0 1px rgba(42, 37, 32, 0.04);
    --shadow-card-hover:  0 3px 8px rgba(42, 37, 32, 0.1), 0 0 0 1px rgba(42, 37, 32, 0.06);

    /* ---- Landing page compat (Scope variables mapped to Badwater) ---- */

    /* Colors */
    --color-background:       var(--color-bg);
    --color-background-300:   #EDE8E0;
    --color-background-400:   #E4DED4;
    --color-contrast:         var(--color-text);
    --color-secondary:        var(--color-text-muted);

    /* Containers */
    --container-small--width:  720px;
    --container-medium--width: 960px;
    --container-wide--width:   1200px;

    /* Typography */
    --font-h3:              1.25rem;
    --font-large:           1.125rem;
    --font-medium:          0.9375rem;
    --font-weight-regular:  400;
    --font-weight-medium:   450;
    --font-weight-semibold: 600;

    /* Spacing scale */
    --spacing-2:  0.5rem;
    --spacing-3:  0.75rem;
    --spacing-4:  1rem;
    --spacing-6:  1.5rem;
    --spacing-7:  1.75rem;
    --spacing-8:  2rem;
    --spacing-9:  2.5rem;
    --spacing-10: 3rem;

    /* Layout */
    --layout--gap:     2rem;
    --layout--padding: var(--site-padding);
    --vertical-rhythm: 1.5rem;
    --radius-1:        6px;
    --radius-2:        10px;

    /* Section defaults */
    --section--content--offset:             1.5rem;
    --section-featured--container-offset:   0px;
    --features-split--offset:               3rem;
    --landing--container-default--width:     var(--container-medium--width);

    /* Additional spacing + color tokens used by Scope components */
    --spacing-1:  0.25rem;
    --spacing-5:  1.25rem;
    --color-foreground:            var(--color-text-muted);
    --color-background-200:        #F2EDE6;
    --font-small:                  0.8125rem;
    --popup--overlay--color:       rgba(42, 37, 32, 0.3);
}