/* =============================================================
   ThreadRecall — colors_and_type.css
   Tokens for the cream-and-charcoal warm-neutral system.
   ============================================================= */

/* ---------- Fonts ---------- */
/* Brand font: Open Sans (humanist sans, 6 weights served locally).
   Camera Plain Variable was the original Lovable inspiration; Open Sans
   replaces it as the licensed brand face. Note: Open Sans is not variable,
   so the original "weight 480" display tier maps to Medium (500). */

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Root tokens ---------- */
:root {
  /* ---------- Primary surfaces ---------- */
  --cream:                  #f7f4ed;   /* page, cards, button surfaces */
  --cream-surface:          #f7f4ed;   /* alias */
  --light-cream:            #eceae4;   /* borders, dividers, image frames */
  --off-white:              #fcfbf8;   /* text on dark, subtle highlights */

  /* ---------- Charcoal & opacity-derived neutrals ---------- */
  --charcoal:               #1c1c1c;
  --charcoal-100:           rgba(28, 28, 28, 1);     /* primary text */
  --charcoal-83:            rgba(28, 28, 28, 0.83);  /* strong secondary */
  --charcoal-82:            rgba(28, 28, 28, 0.82);  /* body */
  --charcoal-40:            rgba(28, 28, 28, 0.4);   /* interactive border */
  --charcoal-04:            rgba(28, 28, 28, 0.04);  /* hover background */
  --charcoal-03:            rgba(28, 28, 28, 0.03);  /* faint overlay */
  --muted-gray:             #5f5f5d;                 /* captions, metadata */

  /* ---------- Semantic color roles ---------- */
  --bg:                     var(--cream);
  --bg-muted:               var(--charcoal-03);
  --bg-hover:               var(--charcoal-04);
  --surface:                var(--cream);
  --surface-inverse:        var(--charcoal);

  --fg:                     var(--charcoal-100);
  --fg-strong:              var(--charcoal-83);
  --fg-body:                var(--charcoal-82);
  --fg-muted:               var(--muted-gray);
  --fg-inverse:             var(--off-white);

  --border:                 var(--light-cream);
  --border-interactive:     var(--charcoal-40);
  --divider:                var(--light-cream);

  /* ---------- Focus / interactive ---------- */
  --ring:                   rgba(59, 130, 246, 0.5);
  --focus-shadow:           0 4px 12px rgba(0, 0, 0, 0.1);

  /* ---------- Signature inset-shadow stack (dark buttons) ---------- */
  --shadow-inset-dark:
    rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(255, 255, 255, 0.2) 0 0.5px 0 0 inset,
    rgba(0, 0, 0, 0.2) 0 0 0 0.5px inset,
    rgba(0, 0, 0, 0.05) 0 1px 2px 0;

  /* ---------- Border radii ---------- */
  --r-micro:                4px;
  --r-button:               6px;
  --r-card-sm:              8px;
  --r-card:                 12px;
  --r-container:            16px;
  --r-pill:                 9999px;

  /* ---------- Spacing scale (8px base) ---------- */
  --s-1:                    8px;
  --s-2:                    10px;
  --s-3:                    12px;
  --s-4:                    16px;
  --s-5:                    24px;
  --s-6:                    32px;
  --s-7:                    40px;
  --s-8:                    56px;
  --s-9:                    80px;
  --s-10:                   96px;
  --s-11:                   128px;
  --s-12:                   176px;
  --s-13:                   192px;
  --s-14:                   208px;

  /* ---------- Type ---------- */
  --font-sans:              'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:           var(--font-sans);

  /* Sizes */
  --t-hero:                 3.75rem;   /* 60px */
  --t-section:              3rem;      /* 48px */
  --t-sub:                  2.25rem;   /* 36px */
  --t-card-title:           1.25rem;   /* 20px */
  --t-body-lg:              1.125rem;  /* 18px */
  --t-body:                 1rem;      /* 16px */
  --t-small:                0.875rem;  /* 14px */
  --t-caption:              0.75rem;   /* 12px */

  /* Line heights */
  --lh-tight:               1.00;
  --lh-snug:                1.10;
  --lh-card:                1.25;
  --lh-body-lg:             1.38;
  --lh-body:                1.50;

  /* Letter spacing */
  --ls-hero:                -1.5px;
  --ls-section:             -1.2px;
  --ls-sub:                 -0.9px;
  --ls-normal:              0;

  /* Weights — Open Sans is not variable, so 480 maps to 500 (Medium). */
  --w-regular:              400;
  --w-medium:               500;
  --w-display-light:        500;   /* was 480 with the variable font */
  --w-semibold:             600;
  --w-bold:                 700;
  --w-extrabold:            800;

  /* ---------- Motion ---------- */
  --ease-out:               cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:            ease-in-out;
  --dur-micro:              150ms;
  --dur-state:              240ms;
  --dur-entrance:           400ms;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type styles ---------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-hero);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-sub);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-card-title);
  font-weight: var(--w-regular);
  line-height: var(--lh-card);
  color: var(--fg);
  margin: 0;
}

.body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  margin: 0;
}

.caption, small {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.eyebrow {
  font-size: var(--t-caption);
  font-weight: var(--w-regular);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-micro) var(--ease-in-out);
}
a:hover { opacity: 0.7; }

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* ---------- Utility primitives ---------- */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.button-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--charcoal);
  color: var(--fg-inverse);
  padding: 8px 16px;
  border-radius: var(--r-button);
  border: none;
  font: inherit;
  font-size: var(--t-body);
  cursor: pointer;
  box-shadow: var(--shadow-inset-dark);
  transition: opacity var(--dur-micro) var(--ease-in-out);
}
.button-dark:hover { opacity: 0.9; }
.button-dark:active { opacity: 0.8; }
.button-dark:focus-visible { box-shadow: var(--shadow-inset-dark), var(--focus-shadow); outline: none; }

.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--fg);
  padding: 8px 16px;
  border-radius: var(--r-button);
  border: 1px solid var(--border-interactive);
  font: inherit;
  font-size: var(--t-body);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-in-out), opacity var(--dur-micro) var(--ease-in-out);
}
.button-ghost:hover { background: var(--bg-hover); }
.button-ghost:active { opacity: 0.8; }
.button-ghost:focus-visible { box-shadow: var(--focus-shadow); outline: none; }

.button-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  color: var(--fg);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: none;
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
  box-shadow: var(--shadow-inset-dark);
  opacity: 0.85;
  transition: opacity var(--dur-micro) var(--ease-in-out);
}
.button-pill:hover { opacity: 1; }
.button-pill:active { opacity: 0.8; }