/* =========================================================================
   STUDIO MOJO · Colors & Type
   The core visual foundations. Import this in every html file of the system.
   Extracted from Claude Design "MojoOS Redesign" prototype 2026-05-12.
   ========================================================================= */

/* ---- FONT FACES ---- */
@font-face { font-family: "Avenir"; src: url("../fonts/Avenir-Light.ttf")    format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("../fonts/Avenir-Book.ttf")     format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("../fonts/Avenir-Regular.ttf")  format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("../fonts/Avenir-Heavy.ttf")    format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("../fonts/Avenir-Black.ttf")    format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Light.ttf")    format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Book.ttf")     format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Black.otf")    format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Noto Sans";       src: url("../fonts/NotoSans-Regular.ttf")    format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans";       src: url("../fonts/NotoSans-Medium.ttf")     format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans";       src: url("../fonts/NotoSans-Bold.ttf")       format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans TC";    src: url("../fonts/NotoSansTC-Regular.ttf")  format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans TC";    src: url("../fonts/NotoSansTC-Bold.ttf")     format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Martian Mono";    src: url("../fonts/MartianMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono";    src: url("../fonts/MartianMono-Medium.ttf")  format("truetype"); font-weight: 500; font-display: swap; }

:root {
  /* ========== COLOR — BRAND ========== */
  --mojo-teal:        #4ECDC4;   /* brand primary — the "M" */
  --mojo-teal-deep:   #2BB5AC;   /* hover / press */
  --mojo-teal-soft:   #B8EAE6;   /* tints, backgrounds */
  --mojo-teal-wash:   #EAF8F6;   /* page-level wash */

  /* ========== COLOR — NEUTRALS ========== */
  --ink:              #0E0E0E;
  --ink-2:            #3A3A3A;
  --ink-3:            #6B6B6B;
  --ink-4:            #A0A0A0;
  --rule:             #D9D6D0;
  --rule-soft:        #EAE6DE;
  --paper:            #F5F1EA;
  --paper-2:          #EFEAE0;
  --cream:            #FAF7F1;
  --white:            #FFFFFF;
  --black:            #000000;

  /* ========== COLOR — MATERIAL ACCENTS ========== */
  --m-bronze:         #8A6A3F;
  --m-bronze-dark:    #5E4626;
  --m-jade:           #3F5E52;
  --m-jade-light:     #8FB0A1;
  --m-gold:           #C79A4B;
  --m-wood:           #B9966B;
  --m-wood-dark:      #7A5A35;
  --m-blue:           #2B5C8A;
  --m-blue-light:     #B8CFDD;
  --m-terracotta:     #B56A4A;

  /* ========== COLOR — SEMANTIC (product UI) ========== */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-muted: var(--ink-4);
  --fg-on-dark: var(--white);
  --fg-on-teal: var(--white);
  --bg-page: var(--paper);
  --bg-surface: var(--white);
  --bg-panel: var(--paper-2);
  --bg-inverse: var(--ink);
  --accent: var(--mojo-teal);
  --accent-hover: var(--mojo-teal-deep);
  --accent-soft: var(--mojo-teal-soft);
  --border: var(--rule);
  --border-strong: var(--ink);
  --status-ok: #3E7B4F;
  --status-warn: #B6802A;
  --status-error: #B94A3A;

  /* ========== TYPE — FAMILIES ========== */
  --font-display: "Gotham", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Avenir", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Avenir", "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-cjk:     "Noto Sans TC", "Avenir", sans-serif;

  /* ========== TYPE — TRACKING ========== */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-open:    0.18em;   /* section labels, eyebrows */
  --tracking-wide:    0.32em;   /* cover titles, large eyebrows */
  --tracking-ultra:   0.5em;    /* decorative */

  /* ========== TYPE — SCALE ========== */
  --fs-eyebrow:    12px;
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-lead:       22px;
  --fs-h4:         20px;
  --fs-h3:         28px;
  --fs-h2:         40px;
  --fs-h1:         56px;
  --fs-display:    80px;
  --fs-display-xl: 120px;
  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.4;
  --lh-relaxed:    1.6;

  /* ========== SPACING ========== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ========== RADII ========== */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-4:    12px;
  --r-pill: 999px;

  /* ========== SHADOWS — warm down-light ========== */
  --shadow-1:    0 1px 2px rgba(14,14,14,0.04), 0 1px 1px rgba(14,14,14,0.03);
  --shadow-2:    0 6px 16px rgba(14,14,14,0.06), 0 2px 4px rgba(14,14,14,0.04);
  --shadow-3:    0 20px 40px rgba(14,14,14,0.10), 0 6px 12px rgba(14,14,14,0.05);
  --shadow-spot: 0 24px 60px -20px rgba(62,46,20,0.25);

  /* ========== MOTION ========== */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ========== SEMANTIC ELEMENT STYLES ========== */
.mojo, .mojo * { box-sizing: border-box; }

.mojo body, .mojo-body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

.mojo-eyebrow, .eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.mojo-h1, .h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.mojo-h2, .h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-snug);  letter-spacing: var(--tracking-normal); color: var(--fg-1); }
.mojo-h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug);  color: var(--fg-1); }
.mojo-h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-open); text-transform: uppercase; color: var(--fg-1); }

.mojo-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

.mojo-lead, .lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-normal);  color: var(--fg-2); }
.mojo-p, p        { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); }
.mojo-small, small, .caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }
.mojo-code, code, kbd, pre   { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.02em; }

/* Dark surface swap */
.on-dark { background: var(--ink); color: var(--white); }
.on-dark .mojo-h1, .on-dark .mojo-h2, .on-dark .mojo-h3, .on-dark .mojo-h4,
.on-dark .mojo-label, .on-dark .mojo-p,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--white); }
.on-dark .mojo-small, .on-dark small { color: var(--ink-4); }