/* =========================================================
   Bit 0100 Bit — Design Tokens
   Cool neutral greys (Apple HIG) + warm Signal amber accent.
   Import this file and use CSS variables. Never hardcode.
   ========================================================= */

/* ---------- BRAND FONTS — Apple San Francisco family ----------
   Relative paths assume this file sits at the project root alongside /fonts/.
   If you import from a subfolder, override these @font-face rules or copy the
   fonts/ directory next to your HTML. */

@font-face { font-family: "SF Pro Display"; font-weight: 100; font-style: normal; src: url("fonts/SF-Pro-Display-Ultralight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 200; font-style: normal; src: url("fonts/SF-Pro-Display-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 300; font-style: normal; src: url("fonts/SF-Pro-Display-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 400; font-style: normal; src: url("fonts/SF-Pro-Display-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 500; font-style: normal; src: url("fonts/SF-Pro-Display-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 600; font-style: normal; src: url("fonts/SF-Pro-Display-Semibold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 700; font-style: normal; src: url("fonts/SF-Pro-Display-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 800; font-style: normal; src: url("fonts/SF-Pro-Display-Heavy.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 900; font-style: normal; src: url("fonts/SF-Pro-Display-Black.otf") format("opentype"); font-display: swap; }

@font-face { font-family: "SF Pro Text"; font-weight: 100; font-style: normal; src: url("fonts/SF-Pro-Text-Ultralight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 200; font-style: normal; src: url("fonts/SF-Pro-Text-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 300; font-style: normal; src: url("fonts/SF-Pro-Text-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 400; font-style: normal; src: url("fonts/SF-Pro-Text-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 400; font-style: italic; src: url("fonts/SF-Pro-Text-RegularItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 500; font-style: normal; src: url("fonts/SF-Pro-Text-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 600; font-style: normal; src: url("fonts/SF-Pro-Text-Semibold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 700; font-style: normal; src: url("fonts/SF-Pro-Text-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 800; font-style: normal; src: url("fonts/SF-Pro-Text-Heavy.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Text"; font-weight: 900; font-style: normal; src: url("fonts/SF-Pro-Text-Black.otf") format("opentype"); font-display: swap; }

@font-face { font-family: "SF Mono"; font-weight: 300; font-style: normal; src: url("fonts/SF-Mono-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 300; font-style: italic; src: url("fonts/SF-Mono-LightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 400; font-style: normal; src: url("fonts/SF-Mono-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 400; font-style: italic; src: url("fonts/SF-Mono-RegularItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 500; font-style: normal; src: url("fonts/SF-Mono-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 500; font-style: italic; src: url("fonts/SF-Mono-MediumItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 600; font-style: normal; src: url("fonts/SF-Mono-Semibold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 600; font-style: italic; src: url("fonts/SF-Mono-SemiboldItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 700; font-style: normal; src: url("fonts/SF-Mono-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 700; font-style: italic; src: url("fonts/SF-Mono-BoldItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 800; font-style: normal; src: url("fonts/SF-Mono-Heavy.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Mono"; font-weight: 800; font-style: italic; src: url("fonts/SF-Mono-HeavyItalic.otf") format("opentype"); font-display: swap; }

:root {
  /* ---------- FONT STACKS ---------- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",    "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, monospace;

  /* ---------- COLOR: CANVAS (pure achromatic greys) ---------- */
  --paper:       #FFFFFF;   /* primary surface */
  --paper-2:     #F5F5F5;   /* subtle alt (rails, hovers) */
  --paper-sunk:  #EBEBEB;   /* pressed / sunken */
  --parchment:   #FFFFFF;   /* alias — equals paper */
  --elevated:    #FFFFFF;   /* card/modal surface */

  /* ---------- COLOR: INK (text + borders, pure greys) ---------- */
  --ink:         #0A0A0A;   /* primary text */
  --ink-2:       #2E2E2E;   /* secondary text */
  --ink-3:       #666666;   /* muted text */
  --ink-4:       #999999;   /* placeholder */
  --ink-5:       #BDBDBD;   /* disabled text */
  --line:        #E5E5E5;   /* default border */
  --line-strong: #CCCCCC;   /* emphasized border */
  --line-faint:  #F0F0F0;   /* faintest divider */

  /* ---------- COLOR: SIGNAL (PRIMARY ACCENT — WARM AMBER) ---------- */
  --signal:         #C85A1E;   /* primary accent, CTAs, focus */
  --signal-hover:   #B24E14;
  --signal-active:  #9D440F;
  --signal-tint:    #FBECDF;   /* 10% tinted fill, selection (cool-neutral base) */
  --signal-ring:    rgba(200, 90, 30, 0.28);

  /* ---------- COLOR: SEMANTIC ---------- */
  --moss:        #2F5D3C;   /* success */
  --moss-tint:   #E2EDE4;
  --ember:       #B4301C;   /* destructive / error */
  --ember-tint:  #F7E0DB;
  --amber:       #A36800;   /* warning (distinct from signal by darkness) */
  --amber-tint:  #F6E9CF;
  --info:        #2D4B6B;   /* informational (muted navy — NOT cyan/teal) */
  --info-tint:   #DFE5EC;

  /* ---------- FILL STATES ---------- */
  --fill:        transparent;
  --fill-hover:  rgba(0, 0, 0, 0.04);
  --fill-active: rgba(0, 0, 0, 0.08);
  --fill-selected: var(--signal-tint);

  /* ---------- ELEVATION / SHADOW ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);

  /* ---------- RADIUS ---------- */
  --r-0:    0px;
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 9999px;

  /* ---------- SPACING (8-pt grid + 4pt half-step) ---------- */
  --s-0: 0px; --s-0-5: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-30: 120px;

  /* ---------- LAYOUT WIDTHS ---------- */
  --w-reading: 720px;
  --w-content: 1080px;
  --w-wide:    1280px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --dur-micro: 120ms;
  --dur-ui:    200ms;
  --dur-page:  320ms;

  /* ---------- TYPE SCALE ---------- */
  --t-caption-size: 12px;  --t-caption-lh: 16px;  --t-caption-tr:  0.01em;
  --t-footnote-size: 13px; --t-footnote-lh: 18px; --t-footnote-tr: 0.005em;
  --t-sub-size:    15px;   --t-sub-lh:    20px;   --t-sub-tr:     0em;
  --t-body-size:   17px;   --t-body-lh:   24px;   --t-body-tr:   -0.003em;
  --t-lead-size:   19px;   --t-lead-lh:   28px;   --t-lead-tr:   -0.006em;
  --t-h3-size:     22px;   --t-h3-lh:     28px;   --t-h3-tr:     -0.01em;
  --t-h2-size:     28px;   --t-h2-lh:     34px;   --t-h2-tr:     -0.015em;
  --t-h1-size:     36px;   --t-h1-lh:     42px;   --t-h1-tr:     -0.02em;
  --t-display-size: 56px;  --t-display-lh: 62px;  --t-display-tr: -0.028em;
  --t-hero-size:    88px;  --t-hero-lh:    92px;  --t-hero-tr:    -0.035em;
}

/* =========================================================
   DARK MODE — cool slate
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root.theme-auto, :root.theme-dark {
    --paper:       #0F0F0F;
    --paper-2:     #181818;
    --paper-sunk:  #0A0A0A;
    --parchment:   #181818;
    --elevated:    #1C1C1C;

    --ink:         #F5F5F5;
    --ink-2:       #C2C2C2;
    --ink-3:       #8C8C8C;
    --ink-4:       #5E5E5E;
    --ink-5:       #3A3A3A;
    --line:        #262626;
    --line-strong: #3D3D3D;
    --line-faint:  #1E1E1E;

    --signal:         #E07838;
    --signal-hover:   #EE8A48;
    --signal-active:  #F09A5C;
    --signal-tint:    rgba(224, 120, 56, 0.14);
    --signal-ring:    rgba(224, 120, 56, 0.38);

    --moss:        #7AB384;  --moss-tint:  rgba(122, 179, 132, 0.14);
    --ember:       #E16A58;  --ember-tint: rgba(225, 106, 88, 0.14);
    --amber:       #D9A34A;  --amber-tint: rgba(217, 163, 74, 0.14);
    --info:        #7B9BBF;  --info-tint:  rgba(123, 155, 191, 0.14);

    --fill-hover:  rgba(255, 255, 255, 0.06);
    --fill-active: rgba(255, 255, 255, 0.10);

    --shadow-1: 0 1px 2px rgba(0,0,0,0.32);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-3: 0 8px 32px rgba(0,0,0,0.52), 0 2px 6px rgba(0,0,0,0.32);
  }
}

/* =========================================================
   BASE ELEMENT STYLES
   ========================================================= */
body {
  font-family: var(--font-text);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-tr);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tr); font-weight: 600; color: var(--ink); margin: 0; }
h2, .t-h2 { font-family: var(--font-display); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tr); font-weight: 600; color: var(--ink); margin: 0; }
h3, .t-h3 { font-family: var(--font-display); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tr); font-weight: 600; color: var(--ink); margin: 0; }

.t-display { font-family: var(--font-display); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-tr); font-weight: 600; }
.t-hero    { font-family: var(--font-display); font-size: var(--t-hero-size);    line-height: var(--t-hero-lh);    letter-spacing: var(--t-hero-tr);    font-weight: 700; }
.t-lead    { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-tr); color: var(--ink-2); }
.t-body    { font-size: var(--t-body-size); line-height: var(--t-body-lh); letter-spacing: var(--t-body-tr); }
.t-sub     { font-size: var(--t-sub-size);  line-height: var(--t-sub-lh);  letter-spacing: var(--t-sub-tr);  color: var(--ink-2); }
.t-footnote{ font-size: var(--t-footnote-size); line-height: var(--t-footnote-lh); letter-spacing: var(--t-footnote-tr); color: var(--ink-3); }
.t-caption { font-size: var(--t-caption-size);  line-height: var(--t-caption-lh);  letter-spacing: var(--t-caption-tr); color: var(--ink-3); text-transform: uppercase; font-weight: 600; }

code, kbd, samp, .t-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 1px 6px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 12px; color: var(--ink-2);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* =========================================================
   PRIMITIVES
   ========================================================= */
.surface { background: var(--paper); color: var(--ink); }
.surface-card { background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-md); }
.surface-sunk { background: var(--paper-sunk); }
.divider { height: 1px; background: var(--line); border: 0; }

.focus-ring:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: inherit;
}

.glyph-0100 { display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 28px; height: 6px; }
.glyph-0100 > i { display: block; background: var(--ink-3); border-radius: 1px; }
.glyph-0100 > i:nth-child(2) { background: var(--signal); }