/* ============================================================
   FLASCE — ALTERNATE DESIGN SKINS (via [data-design] attr)
   Each skin overrides color/type tokens; layout stays.
   ============================================================ */

/* 02 — SWISS (minimal, Helvetica, restrained) */
[data-design="swiss"] {
  --paper: #fafafa;
  --paper-2: #f3f3f3;
  --paper-3: #eaeaea;
  --ink: #0a0a0a;
  --ink-2: #3a3a3a;
  --ink-3: #888;
  --rule: #d8d8d8;
  --rebar: #e63946;
  --rebar-soft: #ffe2e5;
  --steel: #111;
}
[data-design="swiss"] body { background-image: none; background: var(--paper); }
[data-design="swiss"] .hero-title { letter-spacing: -0.055em; }
[data-design="swiss"] .hero-title .serif { font-family: var(--sans); font-style: normal; font-weight: 400; }
[data-design="swiss"] .section { border-top: 2px solid var(--ink); }
[data-design="swiss"] .section::before { display: none; }
[data-theme="dark"][data-design="swiss"],
[data-theme="dark"] [data-design="swiss"] {
  --paper: #1e1e20;
  --paper-2: #26262a;
  --paper-3: #303034;
  --ink: #fafafa;
  --ink-2: #cfcfcf;
  --ink-3: #8a8a8a;
  --rule: #3a3a3e;
  --rebar: #ff5c6a;
  --steel: #fff;
}

/* 03 — LAB NOTEBOOK (denser graph paper, handwritten annotations) */
[data-design="notebook"] {
  --paper: #fbf9f2;
  --paper-2: #f5f1e4;
  --paper-3: #ede6d0;
  --grid-color: oklch(0.78 0.04 60 / 0.55);
  --grid-color-2: oklch(0.68 0.06 60 / 0.45);
  --ink: #1d2438;
  --ink-2: #3b4666;
  --rebar: #c94a1c;
  --rule: #c4b896;
}
[data-design="notebook"] body {
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
[data-design="notebook"] .hero-title .accent { color: var(--rebar); text-decoration: underline wavy; text-underline-offset: 12px; text-decoration-thickness: 2px; }
[data-design="notebook"] .section-num::before { content: "✎ "; }

/* 04 — ACADEMIC IVY (serif-forward, cream, classical) */
[data-design="ivy"] {
  --paper: #f7f2e8;
  --paper-2: #f1ead9;
  --paper-3: #e6dcc0;
  --ink: #1a1a1a;
  --ink-2: #444;
  --ink-3: #857d68;
  --rule: #c8bfa3;
  --rebar: #6b2f1e;
  --steel: #3a5060;
  --sans: "Newsreader", "Iowan Old Style", Georgia, serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
}
[data-design="ivy"] body { background-image: none; background: var(--paper); }
[data-design="ivy"] .hero-title { font-weight: 400; font-style: italic; letter-spacing: -0.03em; }
[data-design="ivy"] .hero-title .serif { font-style: normal; font-weight: 600; }
[data-design="ivy"] .mono, [data-design="ivy"] .mono-sm,
[data-design="ivy"] .section-num, [data-design="ivy"] .section-meta,
[data-design="ivy"] .nav-links a .nav-num, [data-design="ivy"] .tab-btn,
[data-design="ivy"] .chip, [data-design="ivy"] .stat-label,
[data-design="ivy"] .featured-slide .info .tag,
[data-design="ivy"] .project .meta-row,
[data-design="ivy"] .hero-badge { font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-design="ivy"] .btn { border-radius: 2px; }
[data-theme="dark"][data-design="ivy"] {
  --paper: #2a241a;
  --paper-2: #322c20;
  --paper-3: #3d3527;
  --ink: #f3ead6;
  --ink-2: #c9bd9f;
  --ink-3: #8a7f65;
  --rule: #554a36;
  --rebar: #e08a5a;
  --steel: #8ab0c8;
}

/* 05 — GLASS (frosted, depth, layered) */
[data-design="glass"] {
  --paper: oklch(0.95 0.02 245);
  --paper-2: oklch(0.92 0.03 245 / 0.6);
  --paper-3: oklch(0.88 0.04 245 / 0.5);
  --ink: oklch(0.18 0.03 260);
  --ink-2: oklch(0.35 0.04 260);
  --rebar: oklch(0.62 0.2 20);
  --rule: oklch(0.75 0.04 245 / 0.5);
}
[data-design="glass"] body {
  background:
    radial-gradient(circle at 20% 10%, oklch(0.78 0.14 310) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, oklch(0.78 0.14 200) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, oklch(0.8 0.12 60) 0%, transparent 40%),
    var(--paper);
  background-attachment: fixed;
}
[data-design="glass"] .nav,
[data-design="glass"] .featured-stage,
[data-design="glass"] .form,
[data-design="glass"] .project,
[data-design="glass"] .research-areas .area,
[data-design="glass"] .about-photo img {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  background: color-mix(in oklch, white 40%, transparent);
  border-radius: 16px;
}
[data-design="glass"] .projects-grid, [data-design="glass"] .research-areas { background: transparent; border: none; gap: 16px; }
[data-design="glass"] .section { border-top: none; }
[data-design="glass"] .section::before { display: none; }
[data-design="glass"] .featured-stage { border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; }
[data-theme="dark"][data-design="glass"] {
  --paper: oklch(0.24 0.025 260);
  --paper-2: oklch(0.28 0.035 260 / 0.5);
  --paper-3: oklch(0.33 0.045 260 / 0.4);
  --ink: oklch(0.97 0.01 260);
  --ink-2: oklch(0.82 0.02 260);
  --ink-3: oklch(0.6 0.02 260);
  --rule: oklch(0.45 0.04 260 / 0.5);
  --rebar: oklch(0.72 0.2 20);
}
[data-theme="dark"][data-design="glass"] body {
  background:
    radial-gradient(circle at 20% 10%, oklch(0.36 0.15 310) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, oklch(0.36 0.15 200) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, oklch(0.38 0.14 60) 0%, transparent 45%),
    var(--paper);
  background-attachment: fixed;
}
[data-theme="dark"][data-design="glass"] .nav,
[data-theme="dark"][data-design="glass"] .featured-stage,
[data-theme="dark"][data-design="glass"] .form,
[data-theme="dark"][data-design="glass"] .project,
[data-theme="dark"][data-design="glass"] .research-areas .area {
  background: color-mix(in oklch, oklch(0.28 0.01 260) 65%, transparent);
  border: 1px solid rgba(255,255,255,0.1);
}

/* 06 — MOTION (kinetic, dark, big type) */
[data-design="motion"] {
  --paper: #0a0a0a;
  --paper-2: #141414;
  --paper-3: #1f1f1f;
  --ink: #f5f5f5;
  --ink-2: #bbb;
  --ink-3: #666;
  --rule: #2a2a2a;
  --rebar: oklch(0.78 0.2 85);
  --steel: oklch(0.72 0.15 230);
}
[data-design="motion"] body {
  background-image:
    radial-gradient(circle at 50% 0%, oklch(0.25 0.1 280) 0%, transparent 50%),
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}
[data-design="motion"] .hero-title { font-size: clamp(72px, 14vw, 240px); letter-spacing: -0.06em; }
[data-design="motion"] .hero-title .accent {
  background: linear-gradient(90deg, var(--rebar), var(--steel));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-design="motion"] .btn-primary { background: var(--rebar); border-color: var(--rebar); color: #000; }
[data-design="motion"] .project:hover h3 { color: var(--rebar); transition: color .3s; }

/* 07 — BRUTALIST DATA (raw, dense, monospace-heavy) */
[data-design="brutalist"] {
  --paper: #fff;
  --paper-2: #f4f4f4;
  --paper-3: #e6e6e6;
  --ink: #000;
  --ink-2: #000;
  --ink-3: #555;
  --rule: #000;
  --rebar: #ff4500;
  --sans: "JetBrains Mono", ui-monospace, monospace;
  --serif: "JetBrains Mono", ui-monospace, monospace;
}
[data-design="brutalist"] body { background-image: none; background: var(--paper); }
[data-design="brutalist"] .hero-title { font-family: var(--sans); font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; }
[data-design="brutalist"] .hero-title .serif { font-family: var(--sans); font-style: normal; }
[data-design="brutalist"] .section { border-top: 3px solid var(--ink); }
[data-design="brutalist"] .section::before { display: none; }
[data-design="brutalist"] .btn { border-width: 2px; border-radius: 0; }
[data-design="brutalist"] .form, [data-design="brutalist"] .project, [data-design="brutalist"] .featured-stage {
  border-width: 2px; border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
[data-theme="dark"][data-design="brutalist"] {
  --paper: #1a1a1a;
  --paper-2: #222;
  --paper-3: #2c2c2c;
  --ink: #fff;
  --ink-2: #fff;
  --ink-3: #999;
  --rule: #fff;
  --rebar: #ffae42;
}
[data-theme="dark"][data-design="brutalist"] .form,
[data-theme="dark"][data-design="brutalist"] .project,
[data-theme="dark"][data-design="brutalist"] .featured-stage {
  box-shadow: 6px 6px 0 var(--rebar);
}

/* 08 — CRT (retro terminal, green phosphor) */
[data-design="crt"] {
  --paper: #0a120a;
  --paper-2: #0e1a0e;
  --paper-3: #152015;
  --ink: #7fff7f;
  --ink-2: #5fcc5f;
  --ink-3: #3f9f3f;
  --rule: #2a5a2a;
  --rebar: #ffcf40;
  --steel: #40ffff;
  --sans: "JetBrains Mono", ui-monospace, monospace;
  --serif: "JetBrains Mono", ui-monospace, monospace;
  --grid-color: oklch(0.35 0.15 150 / 0.3);
  --grid-color-2: oklch(0.45 0.2 150 / 0.3);
}
[data-design="crt"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,0,0.03) 0 1px, transparent 1px 3px),
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  text-shadow: 0 0 6px rgba(127, 255, 127, 0.5);
}
[data-design="crt"] .hero-title { font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
[data-design="crt"] .hero-title .serif { font-style: normal; font-weight: 700; }
[data-design="crt"] .hero-title .outline { -webkit-text-stroke-color: var(--ink); }
[data-design="crt"] .btn { border-color: var(--ink); }
[data-design="crt"] .btn:hover { background: var(--ink); color: var(--paper); }
[data-design="crt"] img, [data-design="crt"] video { filter: hue-rotate(80deg) saturate(0.6) brightness(0.9); }