/* ============================================================
   ANTONE OS — shared design system
   "Kodachrome futurism": warm paper, one fire signal, light as UI.
   Fonts: Bricolage Grotesque (display) · Hanken Grotesk (body)
          Fraunces italic (Antone's voice) · IBM Plex Mono (system)
   ============================================================ */

:root{
  --bone:      #F6F1E7;
  --bone-2:    #EFE7D6;
  --bone-3:    #E7DCC6;
  --ink:       #14130F;
  --ink-soft:  #4A443B;
  --ink-faint: #8A8172;
  --fire:      #E8552D;
  --fire-deep: #C43D1B;
  --moss:      #6B7257;
  --hairline:  rgba(20,19,15,.14);
  --hairline-2:rgba(20,19,15,.07);
  --glass:     rgba(250,246,238,.78);
  --glass-deep:rgba(246,241,231,.92);
  --shadow-warm: 0 24px 60px -24px rgba(83,50,24,.35), 0 4px 16px -8px rgba(83,50,24,.18);
  --display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --body: "Hanken Grotesk", sans-serif;
  --voice: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* --- NIGHT PAPER: when the wallpaper goes dark (ember/night hours), the whole desk
   breathes with it — warm charcoal paper, not black; same ink→bone inversion, same
   ONE fire signal. Pure token swap: every .pane/.win/.chip/.btn follows automatically.
   Day/dawn/golden keep the light paper. --- */
body.t-night, body.t-ember{
  --bone:      #17140F;   /* warm charcoal "paper" — the ground */
  --bone-2:    #201B15;
  --bone-3:    #2A241C;
  --ink:       #F4EEE2;   /* warm bone "ink" — the text */
  --ink-soft:  #C7BFAF;
  --ink-faint: #8B8271;
  --hairline:  rgba(246,241,231,.16);
  --hairline-2:rgba(246,241,231,.08);
  --glass:     rgba(28,24,18,.62);
  --glass-deep:rgba(24,20,15,.86);
  --shadow-warm: 0 24px 60px -24px rgba(0,0,0,.6), 0 4px 16px -8px rgba(0,0,0,.4);
}
/* the field gradient + light stripe were tuned for cream; on dark paper the wallpaper
   IS the atmosphere, so let it show through instead of a cream wash */
/* background-COLOR only — the shorthand form nuked background-size:cover and the
   night/ember wallpaper stopped filling the screen (tiled at native size) */
body.t-night .field, body.t-ember .field{ background-color:transparent; }
body.t-night .field::after, body.t-ember .field::after{ opacity:.5; }
/* the stragglers that hardcoded warm cream instead of a token — flip them to warm
   charcoal so light "ink" text stays readable. One warm-dark surface, applied broadly. */
body.t-night .chip, body.t-ember .chip,
body.t-night .skillcard, body.t-ember .skillcard,
body.t-night .chatlog .cmsg.antone, body.t-ember .chatlog .cmsg.antone,
body.t-night .chatinput input, body.t-ember .chatinput input,
body.t-night .newscard, body.t-ember .newscard,
body.t-night .calday, body.t-ember .calday,
body.t-night .calday.today, body.t-ember .calday.today,
body.t-night .caladd input, body.t-ember .caladd input,
body.t-night .ml-item.sel, body.t-ember .ml-item.sel,
body.t-night .mg-rule, body.t-ember .mg-rule,
body.t-night .cts-card, body.t-ember .cts-card,
body.t-night .cts-search, body.t-ember .cts-search,
body.t-night .cts-modal input, body.t-ember .cts-modal input,
body.t-night .cts-modal textarea, body.t-ember .cts-modal textarea,
body.t-night .ms-select, body.t-ember .ms-select,
body.t-night .ms-in, body.t-ember .ms-in,
body.t-night .drawer input[type="text"], body.t-ember .drawer input[type="text"]{
  background:rgba(40,34,26,.55); color:var(--ink);
}
/* the radio tuner window hardcodes a cream gradient + cream dial face */
body.t-night #w-radio, body.t-ember #w-radio{ background:linear-gradient(170deg,#1E1912,#161009) !important; }
/* the Stillroom (meditation) also hardcodes a cream ground + orb — dark it in night/ember */
body.t-night #w-meditate, body.t-ember #w-meditate{ background:linear-gradient(172deg,#211B12,#17110A) !important; }
/* THE BOARD hardcodes a cream ground — dark it in night/ember (cards/inputs are token-based so they flip on their own) */
body.t-night #w-dash, body.t-ember #w-dash{ background:linear-gradient(172deg,#211B12,#17110A) !important; }
body.t-night .tuner, body.t-ember .tuner{
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(246,241,231,.08) 9px 10px),
             repeating-linear-gradient(90deg, transparent 0 49px, rgba(246,241,231,.2) 49px 50px), #17120B; }
body.t-night .ms-wall.auto, body.t-ember .ms-wall.auto{ background:linear-gradient(120deg,#2A241C 30%, rgba(232,85,45,.3)); color:var(--ink-soft); }
/* Antone's voice bubble — a touch warmer than the card ground so it reads as "him" */
body.t-night .chatlog .cmsg.antone, body.t-ember .chatlog .cmsg.antone{ background:rgba(46,38,28,.7); }
/* IDEA DECK — the stacked/grid sheets hardcode a cream paper ground, so dark-mode --ink
   (light bone) rendered the body invisible on the closed cards. Force light-theme ink back
   onto the cards (they stay cream in every theme). */
body.t-night .dcard .idea, body.t-ember .dcard .idea,
body.t-night .gcard .gtxt, body.t-ember .gcard .gtxt{ color:#14130F; }
body.t-night .dcard .meta, body.t-ember .dcard .meta,
body.t-night .dcard .who, body.t-ember .dcard .who,
body.t-night .gcard .gmeta, body.t-ember .gcard .gmeta{ color:#8A8172; }
body.t-night .dcard .workit, body.t-ember .dcard .workit{ color:#4A443B; }
body.t-night .dcard .who .av, body.t-ember .dcard .who .av{ background:#14130F; color:#FFFDF8; }
body.t-night .dcard .meta .tagc, body.t-ember .dcard .meta .tagc{ border-color:rgba(20,19,15,.18); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-size-adjust:100%; }
body{
  font-family:var(--body); color:var(--ink); background:var(--bone);
  min-height:100vh; overflow-x:hidden;
}

/* --- Atmosphere: warm light field + grain, never flat ------------- */
.field{
  position:fixed; inset:0; z-index:-2; background:
    radial-gradient(120vmax 80vmax at 70% -20%, #FBF7EE 0%, var(--bone) 45%, var(--bone-2) 100%);
}
.field::after{ /* afternoon light stripe, very quiet */
  content:""; position:absolute; inset:0;
  background:linear-gradient(112deg, transparent 42%, rgba(232,85,45,.045) 50%, transparent 58%);
}
.grain{
  position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.24 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 1.6s steps(3) infinite;
}
@keyframes grain-shift{ 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)} }

/* --- THE presence band: Antone as light around the room ----------- */
.presence{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
  transition:opacity .8s var(--ease-out);
  box-shadow:
    inset 0 0 0 1px rgba(232,85,45,.0),
    inset 0 0 42px -12px rgba(232,85,45,.55),
    inset 0 0 140px -40px rgba(232,85,45,.38);
}
.presence.on{ opacity:1; animation:breathe 3.4s ease-in-out infinite; }
.presence.thinking{ opacity:1; animation:breathe 1.5s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ filter:brightness(.85) } 50%{ filter:brightness(1.25) } }

/* --- Type voices --------------------------------------------------- */
.h-display{ font-family:var(--display); font-weight:640; letter-spacing:-.025em; line-height:.98; }
.antone-voice{ font-family:var(--voice); font-style:italic; font-weight:430; letter-spacing:.002em; color:var(--ink); }
.sys{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.sys b{ color:var(--fire); font-weight:500; }

/* --- Buttons -------------------------------------------------------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:.95rem; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--bone);
  padding:.78rem 1.6rem; border-radius:999px;
  transition:transform .25s var(--ease-out), background .25s, border-color .25s, color .25s;
}
.btn:hover{ transform:translateY(-1px); background:var(--fire-deep); border-color:var(--fire-deep); }
.btn:active{ transform:translateY(0); }
.btn.fire{ background:var(--fire); border-color:var(--fire); }
.btn.fire:hover{ background:var(--fire-deep); border-color:var(--fire-deep); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn.ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* --- Inputs: a hairline you write on, not a box --------------------- */
.line-input{
  font-family:var(--display); font-size:clamp(1.4rem,3.2vw,2.1rem); font-weight:560;
  width:100%; border:0; outline:0; background:transparent; color:var(--ink);
  border-bottom:1px solid var(--hairline); padding:.35em 0; caret-color:var(--fire);
  transition:border-color .3s;
}
.line-input:focus{ border-bottom-color:var(--fire); }
.line-input::placeholder{ color:var(--ink-faint); font-weight:430; }

/* --- Glass panel / window ------------------------------------------- */
.pane{
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--hairline); border-radius:20px; box-shadow:var(--shadow-warm);
}

/* --- Chips ----------------------------------------------------------- */
.chip{
  font-family:var(--body); font-size:.92rem; font-weight:560; cursor:pointer;
  padding:.6rem 1.1rem; border-radius:999px; border:1px solid var(--hairline);
  background:rgba(255,252,246,.6); color:var(--ink-soft);
  transition:all .22s var(--ease-out);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }
.chip.sel{ background:var(--ink); border-color:var(--ink); color:var(--bone); }

/* --- Reveal choreography --------------------------------------------- */
.rise{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
@keyframes rise{ to{ opacity:1; transform:none } }
.d1{ animation-delay:.08s } .d2{ animation-delay:.2s } .d3{ animation-delay:.34s }
.d4{ animation-delay:.5s } .d5{ animation-delay:.68s } .d6{ animation-delay:.88s }

/* --- Antone typing: words arrive like speech -------------------------- */
.speak .w{ opacity:0; display:inline; animation:wordin .5s var(--ease-out) forwards; }
@keyframes wordin{ from{ opacity:0; filter:blur(3px) } to{ opacity:1; filter:none } }

/* --- Hairline rule with fire tick ------------------------------------- */
.rule{ position:relative; height:1px; background:var(--hairline-2); }
.rule::before{ content:""; position:absolute; left:0; top:-1px; height:3px; width:34px; background:var(--fire); border-radius:2px; }

::selection{ background:rgba(232,85,45,.25); }

/* --- Connections buttons in the dark: cream, never ink-on-ink --------- */
body.t-night .connect-btn, body.t-ember .connect-btn{
  color:#F6F1E7; border-color:rgba(246,241,231,.35);
}
body.t-night .connect-btn:hover, body.t-ember .connect-btn:hover{
  color:#F0885C; border-color:var(--fire);
}
body.t-night .connect-btn.on, body.t-ember .connect-btn.on{
  background:rgba(246,241,231,.14); color:#F6F1E7; border-color:rgba(246,241,231,.32);
}