/*
 * The Wagick theme: the marketplace's own night look, carried into its
 * management app. Warm near-black ground, parchment ink, one gold. Cinzel for
 * headings and the wordmark, Cormorant Garamond for big figures, Jost for
 * everything else. The palette and type are DESIGN.md's; change them there
 * first.
 *
 * Every rule is under html[data-theme="witchy"] (or the witchy font set), and
 * the file loads after core.css and every module's stylesheet.
 */

html[data-theme="witchy"]{
  accent-color:#C9A66B; color-scheme:dark;
  /* Wagick's tokens, by name, for the module's own screens. */
  --w-bg:#110F0D; --w-surface:#1A1714; --w-sunk:#24201B;
  --w-ink:#EEE5D3; --w-muted:#A3977F; --w-line:#352E25;
  --w-gold:#C9A66B; --w-gold-soft:#8C7448; --w-bar-quiet:#6E6250;
  /* The same values in the shell's own token names. */
  --ink:#EEE5D3; --ink-soft:#C9BEA8;
  --paper:#110F0D; --paper-raised:#1A1714;
  --line:#352E25; --line-strong:#4A4033;
  --mustard:#C9A66B; --mustard-soft:#2E261B; --mustard-ink:#E4C892;
  --sage:#C9A66B; --sage-soft:#24201B; --sage-ink:#E4C892;
  --brick:#D98F7E; --brick-soft:#2E1C18; --brick-ink:#F0B9AC;
  --blue:#A3977F; --blue-soft:#24201B; --blue-ink:#EEE5D3;
  --green-dot:#C9A66B; --yellow-dot:#C9A66B;
  --text-muted:#A3977F; --subtle-bg:#24201B;
  --violet:#A3977F; --violet-soft:#24201B; --violet-ink:#EEE5D3;
  --plum:#A3977F; --plum-soft:#24201B; --plum-ink:#EEE5D3;
  --teal:#A3977F; --teal-soft:#24201B; --teal-ink:#EEE5D3;
  --radius:6px;
  --panel-radius:14px;
  --chart-a:#C9A66B; --chart-b:#6E6250; --chart-c:#EEE5D3; --chart-d:#8C7448;
}
html[data-theme="witchy"] body{background:#110F0D;color:#EEE5D3;}

/* The font set: Jost for reading, Cinzel for headings, Cormorant for figures. */
html[data-font="witchy"]{
  --font-display:'Cinzel', Georgia, serif;
  --font-ui:'Jost', system-ui, sans-serif;
  --font-figure:'Cormorant Garamond', Georgia, serif;
  font-variant-numeric:tabular-nums;
}
html[data-font="witchy"] body{font-family:var(--font-ui);}
html[data-font="witchy"] .page-title,
html[data-font="witchy"] h1,html[data-font="witchy"] h2,html[data-font="witchy"] h3,
html[data-font="witchy"] .section-title{font-family:var(--font-display);font-weight:600;letter-spacing:0.06em;}
html[data-font="witchy"] .brand-mark{font-family:'Cinzel', Georgia, serif;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;}

/* The rail: the surface tone, a hairline on its right, gold for where you are. */
html[data-theme="witchy"] .rail{background:#1A1714;border-right:1px solid #352E25;}
html[data-theme="witchy"] .brand{gap:10px;}
html[data-theme="witchy"] .rail .brand-logo{height:30px;width:auto;}
html[data-theme="witchy"] .rail .brand-mark{color:#C9A66B;font-size:20px;}
html[data-theme="witchy"] .tab{color:#EEE5D3;font-size:15px;min-height:44px;}
html[data-theme="witchy"] .tab:hover{background:#24201B;}
html[data-theme="witchy"] .tab.active{background:#24201B;border-color:transparent;color:#C9A66B;}
html[data-theme="witchy"] .tab .ic{color:#A3977F;}
html[data-theme="witchy"] .tab.active .ic{color:#C9A66B;}
html[data-theme="witchy"] .nav-category-head{--cat-tint:transparent;--cat-ink:#A3977F;letter-spacing:0.14em;font-size:12px;}

/* Buttons: gold on night for the primary act, a gold hairline for the rest. */
html[data-theme="witchy"] .btn{background:#C9A66B;border-color:#C9A66B;color:#110F0D;min-height:44px;font-weight:500;}
html[data-theme="witchy"] .btn:hover{background:#D8B87E;border-color:#D8B87E;}
html[data-theme="witchy"] .btn.ghost,html[data-theme="witchy"] .btn.secondary{background:transparent;border-color:#8C7448;color:#C9A66B;}
html[data-theme="witchy"] .btn.ghost:hover,html[data-theme="witchy"] .btn.secondary:hover{background:#24201B;color:#EEE5D3;}
html[data-theme="witchy"] a{color:#C9A66B;}
html[data-theme="witchy"] a:hover{color:#EEE5D3;}
html[data-theme="witchy"] :focus-visible{outline:2px solid #C9A66B;outline-offset:2px;}

/* Inputs sit sunk into the surface. */
html[data-theme="witchy"] input,html[data-theme="witchy"] select,html[data-theme="witchy"] textarea{background:#24201B;color:#EEE5D3;border-color:#352E25;}

/* The sign-in card: the same night, the mark and the Cinzel wordmark. */
html[data-theme="witchy"] .login-screen{background:radial-gradient(ellipse at 50% 30%, #2A221A 0%, #110F0D 65%);}
html[data-theme="witchy"] .login-card{background:#1A1714;border:1px solid #352E25;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.45);max-width:380px;}
html[data-theme="witchy"] .login-head{display:flex;flex-direction:column;align-items:center;text-align:center;}
html[data-theme="witchy"] .login-card .brand-logo{max-height:64px !important;margin:0 auto 12px !important;}
html[data-theme="witchy"] .login-card .brand-mark{color:#C9A66B;font-size:26px;}
html[data-theme="witchy"] .login-card .login-sub{color:#A3977F;text-align:center;font-size:14px;}
html[data-theme="witchy"] .login-card label{color:#A3977F;}
html[data-theme="witchy"] .login-card a{color:#C9A66B;}
html[data-theme="witchy"] .login-error{background:#2E1C18;color:#F0B9AC;}

/* The swatch on Settings > Appearance. */
.theme-swatch[data-theme="witchy"]{--sw-paper:#110F0D;--sw-rail:#1A1714;--sw-card:#24201B;--sw-line:#352E25;}

/* One screen of figures, no side dock: the app has a handful of tabs, all in the rail. */
html[data-theme="witchy"] .dock,html[data-theme="witchy"] .dock-reveal{display:none !important;}
@media (min-width:1280px){
  html[data-theme="witchy"] .app{grid-template-columns:220px minmax(0,1fr);}
  html[data-theme="witchy"].rail-collapsed .app{grid-template-columns:64px minmax(0,1fr);}
}
/* Nothing is created from here, so the topbar's Add button has nothing to offer. */
html[data-theme="witchy"] .topbar-add{display:none;}

/* Even-height figures: Cormorant draws old-style numerals unless told otherwise. */
html[data-font="witchy"]{--font-mono:'Jost', system-ui, sans-serif;}
html[data-font="witchy"] .w-figure,html[data-font="witchy"] .num{font-variant-numeric:lining-nums tabular-nums;}

/* The mark on the sign-in card, at a size it reads. */
html[data-theme="witchy"] .login-screen{padding:24px 16px;}
html[data-theme="witchy"] .login-card .brand-logo{height:72px !important;max-height:72px !important;width:auto !important;max-width:none;}

/* On a phone the shell is one column; on a short page the grid shared the
   spare screen height with the header row, leaving an empty band under it. */
@media (max-width:820px){
  html[data-theme="witchy"] .app{align-content:start;}
}

/* Dialogs: a deep night veil behind them instead of Grainpath's green tint. */
html[data-theme="witchy"] .overlay{background:rgba(8,6,5,0.72);}
html[data-theme="witchy"] .modal{background:#1A1714;border-color:#352E25;box-shadow:0 20px 60px rgba(0,0,0,0.55);}

/* Sign in with your Wagick account */
html[data-theme="witchy"] .wagick-note{margin:0 0 18px;color:#C9BEA8;font-size:14px;line-height:1.5;text-align:center;}
html[data-theme="witchy"] .wagick-who{margin:0 0 16px;text-align:center;color:#EEE5D3;font-size:14px;background:#24201B;border-radius:8px;padding:8px;word-break:break-all;}
html[data-theme="witchy"] .wagick-code{letter-spacing:.3em;text-align:center;font-size:18px;}
html[data-theme="witchy"] .wagick-after{margin:14px 0 0 !important;}
html[data-theme="witchy"] .wagick-or{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:#6E6250;font-size:12px;text-transform:uppercase;letter-spacing:.1em;}
html[data-theme="witchy"] .wagick-or::before,html[data-theme="witchy"] .wagick-or::after{content:"";flex:1;height:1px;background:#352E25;}
html[data-theme="witchy"] .wagick-info{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:14px;line-height:1.45;background:#24201B;color:#E8D3A8;border:1px solid #8C7448;}
html[data-theme="witchy"] .wagick-qr{display:block;width:180px;height:180px;margin:0 auto 12px;background:#fff;border-radius:8px;padding:8px;box-sizing:border-box;}
html[data-theme="witchy"] .wagick-secret{margin:0 0 16px;text-align:center;color:#A3977F;font-size:13px;word-break:break-all;}
html[data-theme="witchy"] .wagick-secret code{color:#EEE5D3;font-size:13px;}
/* Danger actions (Revoke, Remove, Close the site) in red, like Remove listing, never the gold of an ordinary yes. */
html[data-theme="witchy"] .btn.danger{background:#B5533F;border-color:#B5533F;color:#FFF5EE;}
html[data-theme="witchy"] .btn.danger:hover{background:#C8644F;border-color:#C8644F;}