/* Etude shared design system. Two identities on the theme toggle:
   light = "Score" (manuscript · Fraunces · rehearsal-pencil red),
   dark  = "Console" (boutique practice deck · amber). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/fraunces-roman.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("fonts/fraunces-italic.woff2") format("woff2")}
:root{
  --paper:#efeee7; --card:#faf9f5; --paper-2:#e7e5db;
  --ink:#17181c; --mut:#6f6e68; --faint:#a2a199;
  --line:#dedcd2; --line-2:#cdcbbf;
  --accent:#b3372b; --accent-2:#8f2b21; --accent-soft:rgba(179,55,43,.10); --red:#b3372b;
  --r:11px; --r-sm:7px;
  --mono:"SFMono-Regular",ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,"Courier New",monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
[data-theme="dark"]{
  --paper:#121114; --card:#1a191e; --paper-2:#24222b;
  --ink:#eeecef; --mut:#918e98; --faint:#6a6772;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#e6a94a; --accent-2:#f0b95e; --accent-soft:rgba(230,169,74,.15); --red:#e0664f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.6 var(--ui);color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft)}

.mono{font-family:var(--mono)}
.mut{color:var(--mut)}

[data-theme="dark"] body{background:linear-gradient(180deg,#201e25,#141319)}

/* wordmark: Fraunces "Étude" flanked by the SVG repeat marks (identical to the Looper) */
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--accent)}
.brand .mark{width:13px;height:22px;color:var(--accent);flex:none}
.brand .title{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:0;color:var(--ink)}

/* buttons */
.btn{font:inherit;font-size:13px;cursor:pointer;color:var(--ink);background:transparent;
     border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 14px;
     transition:border-color .12s,background .12s,color .12s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.icon-btn{border:none;background:transparent;padding:6px;border-radius:var(--r-sm);
     color:var(--mut);cursor:pointer;line-height:1}
.icon-btn:hover{background:var(--paper-2);color:var(--ink)}