/*
 * tokens.css — ritual.icos.dev v2 (Frame Studio redesign)
 *
 * Phase A foundation. Loaded BEFORE app.css in base.twig so app.css can
 * override during the transition; Phase B replaces app.css wholesale and
 * these tokens become the single source of truth through Phase H.
 *
 * Source: _design_bundle/frame-studio-incoming/icon-border-python-remix/
 *         project/Frame Studio.html
 */

:root {
    /* ---------- Frame structure ---------- */
    --border-w:        clamp(48px, 7vw, 64px);
    --rail-icon-size:  clamp(34px, 4vw, 40px);
    --frame-inset:     clamp(10px, 2vw, 20px);
    --radius:          10px;
    --radius-sm:       6px;
    --radius-lg:       14px;

    /* ---------- Type scale ---------- */
    --t-xs:       11px;
    --t-sm:       12px;
    --t-base:     14px;
    --t-lg:       clamp(16px, 1.4vw, 18px);
    --t-xl:       clamp(18px, 1.6vw, 22px);
    --t-2xl:      clamp(22px, 3vw, 30px);
    --t-display:  clamp(48px, 7vw, 84px);

    --tracking-mono:    0.06em;
    --tracking-eyebrow: 0.18em;

    /* ---------- Fonts ---------- */
    --font-ui:      "NHG", "Inter", system-ui, -apple-system, sans-serif;
    --font-display: "Instrument Serif", "NHG", Georgia, serif;
    --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "Consolas", monospace;

    /* ---------- Forest accent (fixed; was burnt orange in v1) ---------- */
    /* sRGB approx of oklch(0.38 0.07 145): #2C5F3F */
    --accent:        oklch(0.38 0.07 145);
    --accent-hover:  oklch(0.48 0.08 145);
    --accent-soft:   oklch(0.38 0.07 145 / 0.18);
    --accent-ink:    #f5f2ea;

    /* ---------- Brand neutrals (Frame Studio) ---------- */
    --bone:    #f5f2ea;
    --bone-2:  #ebe6d9;
    --ink:     #0e0f0c;
    --ink-2:   #1a1c18;
    --ink-3:   #4a4d44;
    --ink-4:   #6b6e62;
    --ink-5:   #97998e;

    /* ---------- Frame chrome (rails / corners overlay the photo) ---------- */
    --rail-line:    rgba(245, 242, 234, 0.22);
    --rail-fg:      #f5f2ea;
    --rail-fg-dim:  rgba(245, 242, 234, 0.65);
    --frame-border: rgba(245, 242, 234, 0.35);

    /* ---------- Bone-card content surface (Phase G; dark-glass post-H) ---------- */
    --bone-card-bg:    rgb(0 0 0 / 0.21);
    --bone-card-line:  rgba(245, 242, 234, 0.18);

    /* ---------- Status colors ---------- */
    --ok:   #1f9d55;
    --warn: #c69a16;
    --bad:  #c83e3e;

    /* ---------- Workspace canvas (under the photo, used until Phase B) ---------- */
    --bg:          #fafaf7;
    --bg-elev:     #ffffff;
    --bg-sunken:   #f0ede4;
    --line:        rgba(14, 15, 12, 0.14);
    --line-soft:   rgba(14, 15, 12, 0.08);
    --line-strong: rgba(14, 15, 12, 0.22);
    --hair:        1px;
    --bad-soft:    rgba(200, 62, 62, 0.10);

    /* ---------- Padding scale (default; data-density overrides below) ---------- */
    --pad-1: 6px;
    --pad-2: 12px;
    --pad-3: 16px;
    --pad-4: 24px;

    /* ---------- View mode dim (toggled via [data-view-mode="dim"]) ---------- */
    --view-dim: rgba(0, 0, 0, 0.45);

    /* ---------- Photo overlay (multi-layer gradient) ---------- */
    --photo-overlay:
        linear-gradient(180deg,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.20) 12%,
            rgba(0,0,0,0.05) 35%,
            rgba(0,0,0,0.05) 62%,
            rgba(0,0,0,0.30) 86%,
            rgba(0,0,0,0.60) 100%),
        linear-gradient(90deg,
            rgba(0,0,0,0.45) 0%,
            rgba(0,0,0,0.12) 12%,
            rgba(0,0,0,0)    30%,
            rgba(0,0,0,0)    70%,
            rgba(0,0,0,0.12) 88%,
            rgba(0,0,0,0.45) 100%),
        radial-gradient(ellipse 90% 70% at 50% 55%,
            rgba(0,0,0,0)    45%,
            rgba(0,0,0,0.18) 100%);

    /* ---------- Motion ---------- */
    --transition-base:        180ms ease;
    --transition-drawer:      280ms cubic-bezier(.2, .9, .2, 1);
    --transition-deconstruct: 600ms cubic-bezier(.2, .9, .2, 1);
    --transition-reconstruct: 1100ms cubic-bezier(.2, .9, .2, 1);
}

/* App mode picker (replaces the old data-theme toggle):
 *   "photo" — default; photo backdrop visible, light-token chrome
 *   "light" — clean white workspace, photo hidden, ink chrome
 *   "dark"  — clean dark workspace, photo hidden, cream chrome
 *
 * data-app-mode lives on <html>, set by the inline head script before paint
 * and by preferences.js's setAppMode() at runtime.
 */
[data-app-mode="dark"] {
    --bg:           #0e0f0c;
    --bg-elev:      #1a1c18;
    --bg-sunken:    #060704;
    --ink:          #f5f2ea;
    --ink-2:        #ebe6d9;
    --ink-3:        #a6a89d;
    --ink-4:        #82847a;
    --ink-5:        #5e6058;
    --line:         rgba(245, 242, 234, 0.18);
    --line-soft:    rgba(245, 242, 234, 0.10);
    --line-strong:  rgba(245, 242, 234, 0.30);
    --bad-soft:     rgba(200, 62, 62, 0.18);

    --bone-card-bg:   rgba(26, 28, 24, 0.86);
    --bone-card-line: rgba(245, 242, 234, 0.14);

    --accent-ink: #0e0f0c;
}

/* Clean Light: ink-colored frame chrome (rails, corners, frame border).
 * Photo-mode chrome was hardcoded cream for over-photo legibility; without
 * the photo, those tokens need to flip to near-black so chrome reads on white. */
[data-app-mode="light"] {
    --rail-line:    rgba(14, 15, 12, 0.18);
    --rail-fg:      var(--ink);
    --rail-fg-dim:  rgba(14, 15, 12, 0.55);
    --frame-border: rgba(14, 15, 12, 0.28);
}

[data-density="compact"] {
    --pad-1: 4px;
    --pad-2: 8px;
    --pad-3: 12px;
    --pad-4: 16px;
}

[data-density="comfortable"] {
    --pad-1: 6px;
    --pad-2: 12px;
    --pad-3: 16px;
    --pad-4: 24px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-base:        0ms;
        --transition-drawer:      0ms;
        --transition-deconstruct: 0ms;
        --transition-reconstruct: 0ms;
    }
}