/*
 * Home — design tokens
 * ---------------------------------------------------------------------------
 * Global primitives and semantic tokens for the hand-rolled component layer.
 *
 * These tokens are declared on :root so every component can consume them, and
 * are the intended foundation for the custom component library replacing
 * MudBlazor. The weather page previously carried its own --wx-* palette scoped
 * to the page root; that has been folded into these tokens.
 *
 * Conventions:
 *   --h-*        Home namespace, avoids collisions with MudBlazor's --mud-*
 *   primitives   raw values (palette ramps, type scale). Rarely used directly.
 *   semantic     purpose-named (surface, text, border). Prefer these.
 *
 * Light theme is applied via [data-theme="light"] on <html>. Dark is the default,
 * matching the app's existing default of darkMode = true.
 */

:root {
    /* ---- Palette primitives ------------------------------------------------ */
    --h-ink-900: #070d0c;
    --h-ink-800: #0b1a17;
    --h-ink-700: #0f2420;
    --h-ink-600: #16332b;
    --h-ink-500: #1e433a;
    --h-ink-400: #2c5a4e;

    --h-paper-50:  #f7faf8;
    --h-paper-100: #eef3f0;
    --h-paper-200: #dde6e1;
    --h-paper-300: #c3d1ca;

    --h-chalk-50:  #f2f4ef;
    --h-chalk-300: #9fb0aa;
    --h-chalk-500: #6f827b;

    /* Accents — shared with the person colour palette used for calendar owners. */
    --h-green:  #5fb87a;
    --h-sky:    #5fa8d3;
    --h-gold:   #e8b14c;
    --h-amber:  #e0894a;
    --h-coral:  #e8694a;
    --h-rose:   #d14a6a;
    --h-orchid: #c77dbb;
    --h-slate:  #9fb0aa;

    /* ---- Play-condition scale ---------------------------------------------- */
    /* Sequential green → gold → coral ramp for the weather page's golf bands,
       with storm as a distinct magenta-red. Declared globally rather than
       page-scoped because GolfConditions.BandColor emits these names into
       inline style attributes, so they must resolve wherever a band is drawn.
       Light values are darkened: bands are used as small text on a tinted
       background, which the dark-theme hues cannot carry on white. */
    --h-band-prime:    #5fb87a;
    --h-band-good:     #8cc06a;
    --h-band-marginal: #e8b14c;
    --h-band-tough:    #e0894a;
    --h-band-avoid:    #e8694a;
    --h-band-storm:    #d14a6a;
    --h-band-unknown:  #8a938f;

    /* ---- Semantic: dark (default) ------------------------------------------ */
    --h-bg:            var(--h-ink-800);
    --h-bg-raised:     var(--h-ink-700);
    --h-surface:       rgba(20, 49, 43, 0.55);
    --h-surface-solid: var(--h-ink-600);
    --h-surface-hover: rgba(28, 64, 56, 0.72);
    --h-surface-sunk:  rgba(7, 13, 12, 0.45);

    --h-text:       var(--h-chalk-50);
    --h-text-dim:   var(--h-chalk-300);
    --h-text-faint: var(--h-chalk-500);
    --h-text-on-accent: #08120f;

    --h-border:        rgba(242, 244, 239, 0.10);
    --h-border-strong: rgba(242, 244, 239, 0.18);
    --h-focus:         var(--h-sky);

    --h-accent:      var(--h-green);
    --h-danger:      var(--h-rose);
    --h-warning:     var(--h-gold);
    --h-success:     var(--h-green);
    --h-info:        var(--h-sky);

    /* Today / selection washes, kept subtle so owner colours stay legible. */
    --h-today-wash:    rgba(95, 168, 211, 0.14);
    --h-selected-wash: rgba(95, 184, 122, 0.16);
    --h-outside-month: rgba(242, 244, 239, 0.35);

    /* ---- Typography -------------------------------------------------------- */
    --h-font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --h-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --h-font-mono:    'IBM Plex Mono', 'Consolas', monospace;

    --h-text-2xs: 0.6875rem;  /* 11px — chip labels, day numbers */
    --h-text-xs:  0.75rem;    /* 12px */
    --h-text-sm:  0.8125rem;  /* 13px */
    --h-text-md:  0.9375rem;  /* 15px — body default */
    --h-text-lg:  1.125rem;
    --h-text-xl:  1.375rem;
    --h-text-2xl: clamp(1.5rem, 2.4vw, 2rem);
    --h-text-3xl: clamp(1.9rem, 3.2vw, 2.6rem);

    --h-weight-normal: 400;
    --h-weight-medium: 500;
    --h-weight-semi:   600;
    --h-weight-bold:   700;

    --h-leading-tight: 1.15;
    --h-leading-normal: 1.5;

    /* ---- Spacing (4px base) ------------------------------------------------ */
    --h-space-0: 0;
    --h-space-1: 0.25rem;
    --h-space-2: 0.5rem;
    --h-space-3: 0.75rem;
    --h-space-4: 1rem;
    --h-space-5: 1.5rem;
    --h-space-6: 2rem;
    --h-space-7: 3rem;

    /* ---- Radii ------------------------------------------------------------- */
    --h-radius-sm:   6px;
    --h-radius-md:   10px;
    --h-radius-lg:   14px;
    --h-radius-xl:   18px;
    --h-radius-pill: 999px;

    /* ---- Elevation --------------------------------------------------------- */
    --h-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --h-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.28);
    --h-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.42);

    /* ---- Motion ------------------------------------------------------------ */
    --h-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --h-duration-fast: 120ms;
    --h-duration-base: 200ms;
    --h-duration-slow: 320ms;

    /* ---- Layout ------------------------------------------------------------ */
    --h-appbar-height: 64px;
    --h-panel-width: 420px;
    --h-drawer-width: 264px;

    /* ---- Stacking ---------------------------------------------------------- */
    /* Documented so components stop inventing values. Values already in use
       elsewhere: page scrim 1200, mobile bottom sheet 1300, user switcher
       scrim/panel 1400/1401. The shell deliberately sits below those — a modal
       sheet is allowed to cover the header, and the switcher dropdown is a child
       of the header's stacking context so it still paints above the drawer. */
    --h-z-drawer-scrim: 1040;
    --h-z-drawer: 1050;
    --h-z-appbar: 1100;
}

/* ---- Semantic: light ------------------------------------------------------ */
[data-theme="light"] {
    --h-bg:            var(--h-paper-50);
    --h-bg-raised:     #ffffff;
    --h-surface:       #ffffff;
    --h-surface-solid: #ffffff;
    --h-surface-hover: var(--h-paper-100);
    --h-surface-sunk:  var(--h-paper-100);

    --h-text:       #10201c;
    --h-text-dim:   #4a5f58;
    --h-text-faint: #7d918a;
    --h-text-on-accent: #ffffff;

    --h-border:        rgba(16, 32, 28, 0.12);
    --h-border-strong: rgba(16, 32, 28, 0.22);

    --h-today-wash:    rgba(95, 168, 211, 0.16);
    --h-selected-wash: rgba(95, 184, 122, 0.18);
    --h-outside-month: rgba(16, 32, 28, 0.38);

    --h-shadow-sm: 0 1px 2px rgba(16, 32, 28, 0.08);
    --h-shadow-md: 0 4px 14px rgba(16, 32, 28, 0.10);
    --h-shadow-lg: 0 18px 48px rgba(16, 32, 28, 0.18);

    /* Darkened so each band clears 4.5:1 as small text on the pale tint that
       backs it (the dark-theme hues sit around 2:1 on white). */
    --h-band-prime:    #24794a;
    --h-band-good:     #55801f;
    --h-band-marginal: #8a6612;
    --h-band-tough:    #a85a1e;
    --h-band-avoid:    #c0401f;
    --h-band-storm:    #ad2247;
    --h-band-unknown:  #5f6c66;
}

/* ---- Primitives ----------------------------------------------------------- */

.h-focusable:focus-visible,
.h-btn:focus-visible,
.h-input:focus-visible {
    outline: 2px solid var(--h-focus);
    outline-offset: 2px;
}

/* Buttons */
.h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--h-space-2);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--h-border-strong);
    border-radius: var(--h-radius-md);
    background: var(--h-surface);
    color: var(--h-text);
    font-family: var(--h-font-body);
    font-size: var(--h-text-sm);
    font-weight: var(--h-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background var(--h-duration-fast) var(--h-ease),
                border-color var(--h-duration-fast) var(--h-ease),
                transform var(--h-duration-fast) var(--h-ease);
}

.h-btn:hover:not(:disabled) { background: var(--h-surface-hover); }
.h-btn:active:not(:disabled) { transform: translateY(1px); }
.h-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.h-btn--primary {
    background: var(--h-accent);
    border-color: transparent;
    color: var(--h-text-on-accent);
    font-weight: var(--h-weight-semi);
}

.h-btn--primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--h-accent); }

.h-btn--ghost { background: transparent; border-color: transparent; color: var(--h-text-dim); }
.h-btn--ghost:hover:not(:disabled) { background: var(--h-surface-hover); color: var(--h-text); }

.h-btn--danger { border-color: transparent; background: var(--h-danger); color: #fff; }

.h-btn--icon { padding: 0.45rem; border-radius: var(--h-radius-md); }

/* Inputs */
.h-input,
.h-select,
.h-textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--h-surface-sunk);
    border: 1px solid var(--h-border-strong);
    border-radius: var(--h-radius-md);
    color: var(--h-text);
    font-family: var(--h-font-body);
    font-size: var(--h-text-md);
    transition: border-color var(--h-duration-fast) var(--h-ease);
}

.h-input::placeholder, .h-textarea::placeholder { color: var(--h-text-faint); }
.h-input:focus, .h-select:focus, .h-textarea:focus { border-color: var(--h-focus); outline: none; }

.h-input:disabled, .h-select:disabled, .h-textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: transparent;
}

.h-textarea { resize: vertical; min-height: 84px; line-height: var(--h-leading-normal); }

/* Range slider. Declared globally rather than in a scoped stylesheet so the
   vendor pseudo-elements are written once — the dimmer and bulb cards share it. */
.h-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
}

.h-range:disabled { opacity: 0.5; cursor: not-allowed; }
.h-range:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }

.h-range::-webkit-slider-runnable-track {
    height: 4px;
    border: 1px solid var(--h-border-strong);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-sunk);
}

.h-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    /* Pulls the 16px thumb back over the 4px track and its 1px border. */
    margin-top: -7px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: var(--h-radius-pill);
    background: var(--h-accent);
    box-shadow: var(--h-shadow-sm);
}

.h-range::-moz-range-track {
    height: 4px;
    border: 1px solid var(--h-border-strong);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-sunk);
}

.h-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: var(--h-radius-pill);
    background: var(--h-accent);
}

.h-label {
    display: block;
    margin-bottom: var(--h-space-1);
    color: var(--h-text-dim);
    font-size: var(--h-text-xs);
    font-weight: var(--h-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.h-field { margin-bottom: var(--h-space-4); }

.h-hint { margin-top: var(--h-space-1); color: var(--h-text-faint); font-size: var(--h-text-xs); }

/* Avatar */
.h-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--h-radius-pill);
    background: var(--person, var(--h-slate));
    color: #08120f;
    font-family: var(--h-font-display);
    font-size: var(--h-text-xs);
    font-weight: var(--h-weight-bold);
    overflow: hidden;
    user-select: none;
}

.h-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-avatar--sm { width: 24px; height: 24px; font-size: var(--h-text-2xs); }
.h-avatar--lg { width: 56px; height: 56px; font-size: var(--h-text-lg); }
.h-avatar--xl { width: 84px; height: 84px; font-size: var(--h-text-xl); }

/* Cards & panels */
.h-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-sm);
}

/* Feedback states */
.h-alert {
    display: flex;
    gap: var(--h-space-2);
    align-items: flex-start;
    padding: var(--h-space-3) var(--h-space-4);
    border: 1px solid var(--h-border-strong);
    border-left: 3px solid var(--h-danger);
    border-radius: var(--h-radius-md);
    background: var(--h-surface-sunk);
    color: var(--h-text);
    font-size: var(--h-text-sm);
}

.h-alert--info { border-left-color: var(--h-info); }
.h-alert--warn { border-left-color: var(--h-warning); }

.h-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--h-border-strong);
    border-top-color: var(--h-accent);
    border-radius: 50%;
    animation: h-spin 720ms linear infinite;
}

@keyframes h-spin { to { transform: rotate(360deg); } }

.h-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .h-spinner { animation-duration: 2.4s; }
    .h-btn { transition: none; }
}