/* styles.css */
/* Unified palette + semantic surfaces + sheen modes */

/* -----------------------------
   Minimal fallback palette (in case JS fails)
----------------------------- */
:root{
    --bg: linear-gradient(180deg,#0d1018 0%,#07090f 100%);
    --text-primary:#e7e9f1;
    --text-secondary:#a5a8b6;

    /* brand accents (not semantics) */
    --accent-indigo:#4f5599;
    --accent-moss:#3a8b79;
    --accent-highlight:#bcd7f2;

    --surface: rgba(18,22,34,.78);
    --border:  rgba(55,64,96,.52);

    --shadow-1: 0 1px 0 rgba(120,160,150,.04);
    --shadow-2: 0 16px 52px rgba(10,18,24,.55);

    --pill-active-bg: rgba(80,116,175,.14);
}

/* -----------------------------
   Semantics + Global defaults
----------------------------- */

:root{
    /* semantic meaning colors */
    --sem-highlight: var(--accent-highlight);
    --sem-info:      color-mix(in srgb, var(--accent-indigo) 65%, var(--text-secondary));
    --sem-success:   color-mix(in srgb, var(--accent-moss) 88%, black);
    --sem-attention: #b89b6a;
    --sem-destructive:#8f4b3e;

    --focus-ring: color-mix(in srgb, var(--accent-highlight) 55%, transparent);

    /* surface defaults */
    --spine: var(--border);
    --bleed0: 16%;
    --bleed1: 26%;
    --bleed2: 32%;

    /* always defined so IDE/browser never complain */
    --surface-live: var(--surface);

    /* sheen system (tinted overlay) */
    --sheen-base-opacity: 0.95;

    /* sheen policy variables (set per mode below) */
    --card-sheen: 1;
    --swatch-sheen: 0;
    --btn-rest-sheen: 0;
    --btn-hover-sheen: 1;
}

/* semantic classes set variables only */
.semantic-highlight   { --spine: var(--sem-highlight); }
.semantic-info        { --spine: var(--sem-info); }
.semantic-success     { --spine: var(--sem-success); }
.semantic-attention   { --spine: var(--sem-attention); --bleed0:18%; --bleed1:30%; --bleed2:36%; }
.semantic-destructive { --spine: var(--sem-destructive); --bleed0:18%; --bleed1:30%; --bleed2:36%; }

/* -----------------------------
   Sheen modes (default = current behavior)
----------------------------- */

:root[data-sheen-mode="default"]{
    --card-sheen: 1;
    --swatch-sheen: 0;
    --btn-rest-sheen: 0;
    --btn-hover-sheen: 1;
}

:root[data-sheen-mode="none"]{
    --card-sheen: 0;
    --swatch-sheen: 0;
    --btn-rest-sheen: 0;
    --btn-hover-sheen: 0;
}

:root[data-sheen-mode="all"]{
    --card-sheen: 1;
    --swatch-sheen: 1;
    --btn-rest-sheen: 1;
    --btn-hover-sheen: 1;
}

:root[data-sheen-mode="cards"]{
    --card-sheen: 1;
    --swatch-sheen: 0;
    --btn-rest-sheen: 0;
    --btn-hover-sheen: 0;
}

:root[data-sheen-mode="buttons"]{
    --card-sheen: 0;
    --swatch-sheen: 0;
    --btn-rest-sheen: 1;
    --btn-hover-sheen: 1;
}

/* -----------------------------
   Base
----------------------------- */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ min-height:100%; background:var(--bg); }

body{
    min-height:100vh;
    background:transparent;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text-primary);
    line-height:1.6;
    padding:2rem;
}

.secondary{ color:var(--text-secondary); }

:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px var(--focus-ring);
    border-radius:10px;
}

/* -----------------------------
   Layout
----------------------------- */

header{ max-width:900px; margin:0 auto 2rem; }
h1{ margin:0; font-size:2rem; }
.subtitle{ margin-top:.25rem; color:var(--text-secondary); }

main{
    max-width:900px;
    margin:0 auto;
    display:grid;
    gap:2rem;
}

/* -----------------------------
   Unified Surface Primitive
----------------------------- */

.surface{
    position:relative;
    overflow:hidden;

    /* live alpha from slider (or default follows palette surface) */
    background: var(--surface-live);

    border: 1px solid var(--border);
    border-left: 4px solid var(--spine);

    border-radius:14px;
    box-shadow: var(--shadow-1), var(--shadow-2);
    backdrop-filter: blur(6px);

    /* bleed amount used by sheen */
    --bleed: var(--bleed0);

    /* local sheen toggle (0/1) */
    --sheen: 1;
}

.surface::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background: linear-gradient(90deg,
    color-mix(in srgb, var(--spine) var(--bleed), transparent) 0%,
    rgba(255,255,255,0) 52%
    );

    opacity: calc(var(--sheen-base-opacity) * var(--sheen));

    transition:
            opacity 220ms cubic-bezier(.2,.8,.2,1),
            --bleed 220ms cubic-bezier(.2,.8,.2,1);
}

@property --bleed {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 16%;
}

/* -----------------------------
   Components
----------------------------- */

.card{
    padding:1.5rem;
    --sheen: var(--card-sheen);
}

.swatches{ display:flex; gap:1rem; flex-wrap:wrap; }
.swatch{
    flex: 1 1 160px;
    padding: 1rem;
    font-weight: 650;
    border-radius: 12px;
    --sheen: var(--swatch-sheen);
}
.swatch .label{ position:relative; display:block; font-size:.95rem; }
.swatch .hex{ position:relative; display:block; margin-top:.25rem; color:var(--text-secondary); font-weight:550; }

.buttons{ display:flex; gap:1rem; flex-wrap:wrap; }

.btn{
    border-radius:12px;
    padding: .62rem 1.05rem;
    background: rgba(255,255,255,0.04);
    cursor:pointer;
    font:inherit;
    color: var(--text-primary);

    --sheen: var(--btn-rest-sheen);
    --bleed: var(--bleed0);

    transition:
            border-top-color .14s ease,
            border-right-color .14s ease,
            border-bottom-color .14s ease,
            box-shadow .14s ease;
}

.ghost{
    border-left-width: 0;
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    box-shadow: var(--shadow-1), 0 20px 60px rgba(0,0,0,.20);

    --sheen: 0;
}
.ghost::after{ display:none; }

/* -----------------------------
   Button hover/active: sheen is the tinted overlay
----------------------------- */

.btn:hover{
    --sheen: var(--btn-hover-sheen);

    border-top-color:    color-mix(in srgb, var(--spine) 40%, var(--border));
    border-right-color:  color-mix(in srgb, var(--spine) 40%, var(--border));
    border-bottom-color: color-mix(in srgb, var(--spine) 40%, var(--border));
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 18px 46px rgba(0,0,0,0.26);

    --bleed: var(--bleed1);
}

.btn:hover::after{
    background: linear-gradient(90deg,
    color-mix(in srgb, var(--spine) var(--bleed1), transparent) 0%,
    color-mix(in srgb, var(--spine) 10%, transparent) 68%,
    rgba(255,255,255,0) 100%
    );
}

.btn:active{
    --sheen: var(--btn-hover-sheen);

    border-top-color:    color-mix(in srgb, var(--spine) 52%, var(--border));
    border-right-color:  color-mix(in srgb, var(--spine) 52%, var(--border));
    border-bottom-color: color-mix(in srgb, var(--spine) 52%, var(--border));

    --bleed: var(--bleed2);
    transition-duration: 90ms;
}

.btn:active::after{
    background: linear-gradient(90deg,
    color-mix(in srgb, var(--spine) var(--bleed2), transparent) 0%,
    color-mix(in srgb, var(--spine) 12%, transparent) 100%
    );
}

/* -----------------------------
   Controls
----------------------------- */

.controls{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    margin-top:1.25rem;
    align-items:center;
}

.pill{
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .5rem .9rem;
    cursor:pointer;
    font:inherit;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pill:hover{
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}
.pill[aria-pressed="true"]{
    color: var(--text-primary);
    border-color: rgba(0,0,0,0);
    background: var(--pill-active-bg);
}

.controls{
    position: sticky;
    top: 1rem;
    z-index: 50;

    margin: 0 auto 2rem;     /* keeps it aligned with your 900px layout */
    max-width: 900px;

    padding: .75rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-live) 86%, transparent);
    backdrop-filter: blur(10px);
}

.slider{
    display:flex;
    gap:.6rem;
    align-items:center;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
}
.slider label{
    font-size: .95rem;
    color: var(--text-secondary);
}
.slider input[type="range"]{
    width: 180px;
}
.slider .value{
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 3.5ch;
    text-align:right;
}

/* -----------------------------
   Grain
----------------------------- */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.02;
    mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}