/*
 * s3-skin.css — opt-in repolish for every s3_head() page (landing, pricing, …).
 *
 * Inert unless s3-skin.js put .skin2 on <html>. Dark stays exactly the iOS
 * palette from s3.css; this adds the greenish-white light mode that matches the
 * s3eidatGPT app, and the theme toggle. s3.css is token-driven, so light mode is
 * mostly a token swap — the overrides below are the few places it hard-codes
 * white-on-dark.
 */

.s3-themebtn { display: none; }
html.skin2 .s3-themebtn {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
    cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.skin2 .s3-themebtn:hover { border-color: var(--glow); color: var(--glow); }
html.skin2 .s3-themebtn svg { width: 17px; height: 17px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- light ---------- */
html.skin2[data-theme="light"] {
    --bg:        #dbe9df;
    --surface:   #eef6f0;
    --surface-2: #f7fbf8;
    --surface-3: #ffffff;

    --ink:   #0b1711;
    --dim:   #3f5349;
    --faint: #5d7067;

    --green:      #13b074;
    --green-deep: #098a52;
    --glow:       #098a52;   /* mint is unreadable as text on a light canvas */

    --line:      rgba(8, 46, 30, .12);
    --line-soft: rgba(8, 46, 30, .07);
    --line-hi:   rgba(8, 46, 30, .22);
    color-scheme: light;
}

html.skin2[data-theme="light"] .hdr           { background: rgba(219, 233, 223, .82); }
html.skin2[data-theme="light"] .hdr.is-stuck  { background: rgba(219, 233, 223, .94); }
html.skin2[data-theme="light"] .nav-links a:hover,
html.skin2[data-theme="light"] .btn.ghost:hover,
html.skin2[data-theme="light"] .sheet-card a:active { background: rgba(8, 46, 30, .06); }
html.skin2[data-theme="light"] .nav-links a[aria-current="page"] { background: rgba(16, 160, 100, .12); }
html.skin2[data-theme="light"] .btn.quiet { background: rgba(8, 46, 30, .07); }

/* landing mock-ups: bars and placeholders were white-on-dark */
html.skin2[data-theme="light"] .fstep .bar,
html.skin2[data-theme="light"] .fprev .pv { background: rgba(8, 46, 30, .1); }

/* cards lift off the canvas instead of relying on a darker step */
html.skin2[data-theme="light"] .demo,
html.skin2[data-theme="light"] .appshot,
html.skin2[data-theme="light"] .model,
html.skin2[data-theme="light"] .plan {
    box-shadow: 0 1px 2px rgba(14, 40, 26, .05), 0 18px 40px -26px rgba(14, 40, 26, .3);
}