/* ---------------------------------------------------------------------------
   Mohaimen OS — design tokens
   Everything visual lives here. No other file states a colour, a size or a
   family literal; they all read a token. That is what makes a future design
   import a swap of this file rather than a rebuild — the last interface had
   18 inline colour literals and no type scale, and could not be restyled at all.
--------------------------------------------------------------------------- */

:root{
  /* ---- ground ------------------------------------------------------------ */
  --ink:        #0B0B0B;   /* the page */
  --panel:      #141414;   /* a card on the page */
  --panel-2:    #1B1A19;   /* a card on a card */
  --line:       #262524;   /* hairline */
  --line-soft:  #1F1E1D;

  /* ---- type -------------------------------------------------------------- */
  --bone:       #F2EFE9;   /* primary text */
  --bone-2:     #C9C4BC;   /* secondary */
  --dim:        #8A857E;   /* labels, timestamps */
  --dimmer:     #5E5A55;

  /* ---- accent ------------------------------------------------------------ */
  --oxblood:    #8B2020;
  --oxblood-lo: #6E1A1A;   /* the hero block */
  --oxblood-hi: #A82929;

  /* ---- the six life areas ------------------------------------------------
     Colour is a LABEL on an item, never a wall to cross, and never something
     he sets. See canon/wall.md. */
  --c-work:     #8B2020;
  --c-money:    #B7862F;
  --c-family:   #3E7A5E;
  --c-health:   #3E6A8A;
  --c-growth:   #7A5AA8;
  --c-system:   #6E6A66;

  /* ---- typography --------------------------------------------------------
     IBM Plex Sans + IBM Plex Sans Arabic. Chosen over Alliance No.2 and Avenir
     because he writes and reads Arabic constantly and neither of those ships an
     Arabic companion — without one, every Arabic message falls back to a system
     face and the design breaks exactly where he uses it most. */
  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system,
          BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Large by default. He reads on a phone in short windows, often one-handed;
     this is a legibility requirement, not a preference. */
  --t-hero:     30px;   /* the one thing that needs him */
  --t-title:    25px;   /* screen titles */
  --t-item:     18px;   /* an item in a list — the size most text is */
  --t-body:     16px;
  --t-meta:     13px;
  --t-label:    11px;   /* uppercase, tracked */

  --lh-tight:   1.14;
  --lh-body:    1.45;

  --track:      .18em;  /* the letter-spacing on every micro-label */

  /* ---- space ------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 42px;

  --edge: 18px;         /* screen gutter */
  --radius: 0px;        /* the reference is boxy: squared corners throughout */
  --rule: 3px;          /* the colour bar down the left of an item */
}

/* Category helpers — one place, used by every surface. */
.c-work   { --c: var(--c-work); }
.c-money  { --c: var(--c-money); }
.c-family { --c: var(--c-family); }
.c-health { --c: var(--c-health); }
.c-growth { --c: var(--c-growth); }
.c-system { --c: var(--c-system); }

/* The uppercase tracked micro-label that runs across the whole design. */
.label{
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

/* The four things a cockpit row can be. Shape carries the kind, colour carries
   the life area — so the two never compete for the same channel. */
.k-approval { --k: var(--oxblood-hi); }
.k-question { --k: #C9A227; }
.k-note     { --k: var(--dim); }
.k-discussion { --k: #4E8FA8; }

/* Motion: enough to say the system is working, never enough to delay reading.
   Where spectacle and legibility conflict, legibility wins. */
@media (prefers-reduced-motion: no-preference){
  .rise{ animation: rise .26s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }
  .pulse{ animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
}

/* Speaker identity is independent of topic colour; labels remain visible. */
.turn {border-left:4px solid var(--speaker,#bdc1c8);border-radius:12px;padding:18px;margin:14px 0;background:color-mix(in srgb,var(--speaker,#bdc1c8) 10%,#101114);}
.turn.me {margin-left:clamp(20px,8vw,80px);background:#202b3b;border-left-color:#8eadd1;}
.turn.them {margin-right:clamp(12px,4vw,40px);}
.turn .who {color:var(--speaker,#bdc1c8);font-weight:700;}
.turn .body,.note-body {font-size:18px;line-height:1.65;}
summary {cursor:pointer;min-height:44px;}
summary:focus-visible,button:focus-visible {outline:2px solid #d1b68c;outline-offset:4px;}
.kept-note .note-body {white-space:pre-wrap;overflow-wrap:anywhere;margin-top:20px;}
.plan p {line-height:1.6;font-size:17px;}.plan .acts {display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

.plan .acts button {min-height:44px;padding:10px 14px;border:1px solid #56504a;border-radius:8px;background:#25211e;color:#f2efe9;font-size:16px;}
.plan .acts button:first-child {background:#493035;border-color:#97606b;}

.study-run {margin-top:20px;border-top:1px solid #555;padding-top:16px;} .study-run textarea,.study-run input {display:block;width:100%;box-sizing:border-box;background:#202124;color:#f2efe9;border:1px solid #777;border-radius:6px;padding:12px;font:inherit;margin:12px 0;} .study-run textarea {min-height:150px;} .study-run button {min-height:44px;padding:10px;margin:8px 8px 8px 0;background:#493035;border:1px solid #97606b;border-radius:8px;} .study-run .note-body {white-space:pre-wrap;line-height:1.6;}