/* ============================================================
   FFkit — Colors & Type tokens
   Light/dark mode. Single accent: forest green (#5F8D42).
   Inspired by Linear/Raycast: calm, technical, generous whitespace.
   ============================================================ */

/* ---------- Brand webfonts ---------------------------------
   Sirba — display serif (TypeTogether). Regular + Italic.
   PP Mori — sans for everything else (Pangram Pangram).
             3 weights uploaded: 200 Extralight, 400 Regular, 600 SemiBold.
   Mono — Geist Mono via Google Fonts (no brand spec for code).
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Sirba';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Sirba-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Sirba';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Sirba-Italic.otf') format('opentype');
}
@font-face {
  font-family: 'PP Mori';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/PPMori-Extralight.otf') format('opentype');
}
@font-face {
  font-family: 'PP Mori';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PPMori-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'PP Mori';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/PPMori-SemiBold.otf') format('opentype');
}
/* Mono — no brand spec for code. Geist Mono pairs cleanly with PP Mori. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------- COLOR — ACCENT ------------------ */
  --accent-50:  #f1f6ec;
  --accent-100: #dde9d0;
  --accent-200: #bcd3a1;
  --accent-300: #97b873;
  --accent-400: #79a052;
  --accent-500: #5F8D42;  /* brand */
  --accent-600: #4c7235;
  --accent-700: #3c5a2b;
  --accent-800: #2f4624;
  --accent-900: #233520;

  /* ------------------------- NEUTRALS ------------------------ */
  /* Cool-tinted greys — pair with the green accent without going warm */
  --gray-0:   #ffffff;
  --gray-25:  #fafafa;
  --gray-50:  #f5f6f5;
  --gray-100: #ececec;
  --gray-200: #dcdddc;
  --gray-300: #c2c4c2;
  --gray-400: #9b9d9a;
  --gray-500: #74766f;  /* secondary text */
  --gray-600: #555751;
  --gray-700: #3b3d38;
  --gray-800: #26282a;
  --gray-900: #16181a;
  --gray-950: #0c0d0f;

  /* ------------------------- SEMANTIC — LIGHT ---------------- */
  --bg:           var(--gray-25);
  --bg-elevated:  var(--gray-0);
  --bg-sunken:    var(--gray-50);
  --bg-inset:     var(--gray-100);
  --bg-hover:     rgba(22, 24, 26, 0.04);
  --bg-active:    rgba(22, 24, 26, 0.08);

  --fg:           var(--gray-900);   /* primary text */
  --fg-muted:     var(--gray-600);   /* secondary text */
  --fg-subtle:    var(--gray-500);   /* tertiary, labels */
  --fg-faint:     var(--gray-400);   /* disabled */
  --fg-inverse:   var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-subtle: var(--gray-100);

  --accent:         var(--accent-500);
  --accent-hover:   var(--accent-600);
  --accent-press:   var(--accent-700);
  --accent-soft:    var(--accent-50);
  --accent-fg:      #ffffff;

  /* Status colors — desaturated, calm */
  --success: #4c7235;     /* reuses accent family */
  --warning: #b08527;
  --danger:  #b8443a;
  --info:    #3a78bf;

  /* ------------------------- RADII --------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* ------------------------- SPACING (4px base) -------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* ------------------------- SHADOWS ------------------------- */
  /* Soft, low-contrast — calm, never heavy */
  --shadow-xs: 0 1px 0 rgba(22, 24, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(22, 24, 26, 0.05), 0 1px 1px rgba(22, 24, 26, 0.03);
  --shadow-md: 0 2px 6px rgba(22, 24, 26, 0.06), 0 1px 2px rgba(22, 24, 26, 0.04);
  --shadow-lg: 0 8px 24px rgba(22, 24, 26, 0.08), 0 2px 6px rgba(22, 24, 26, 0.04);
  --shadow-xl: 0 24px 60px rgba(22, 24, 26, 0.12), 0 6px 18px rgba(22, 24, 26, 0.06);
  --ring-focus: 0 0 0 2px rgba(95, 141, 66, 0.18);
  --ring-inset: inset 0 0 0 1px var(--border);

  /* ------------------------- MOTION -------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* default */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* sparingly */
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 360ms;

  /* ------------------------- TYPE — FAMILIES ----------------- */
  --font-serif: "Sirba", "Source Serif 4", ui-serif, Georgia, serif;
  --font-sans:  "PP Mori", "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ------------------------- TYPE — SCALE -------------------- */
  /* Display (Sirba Regular) — both Regular and Italic cuts are licensed.
     Default is roman/upright; use the .italic class or font-style:italic
     in inline copy when you want the calligraphic italic for emphasis. */
  --type-display-2xl: 400 88px/0.98 var(--font-serif);
  --type-display-xl:  400 64px/1.02 var(--font-serif);
  --type-display-lg:  400 48px/1.06 var(--font-serif);
  --type-display-md:  400 36px/1.10 var(--font-serif);
  --type-display-sm:  400 28px/1.18 var(--font-serif);

  /* Headings (PP Mori) — uses 600 SemiBold. */
  --type-h1: 600 32px/1.20 var(--font-sans);
  --type-h2: 600 24px/1.24 var(--font-sans);
  --type-h3: 600 18px/1.32 var(--font-sans);
  --type-h4: 600 15px/1.36 var(--font-sans);
  --type-h5: 600 13px/1.36 var(--font-sans);

  /* Body — PP Mori Regular */
  --type-body-lg: 400 17px/1.55 var(--font-sans);
  --type-body:    400 14px/1.55 var(--font-sans);
  --type-body-sm: 400 13px/1.50 var(--font-sans);
  --type-caption: 400 12px/1.45 var(--font-sans);

  /* Mono / code */
  --type-code:    500 13px/1.55 var(--font-mono);
  --type-code-sm: 500 12px/1.55 var(--font-mono);

  /* Eyebrow / micro-label — PP Mori SemiBold, tight + tracked */
  --type-eyebrow: 600 11px/1.40 var(--font-sans);

  /* ------------------------- LETTER-SPACING ------------------ */
  --tracking-tight:  -0.02em;   /* large display */
  --tracking-snug:   -0.01em;   /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;   /* uppercase eyebrows */
}

/* ============================================================
   DARK THEME — warm-tinted neutrals
   Anchors set from brand: bg #1F1F1E, surface #2C2C2A, text #C0BFB5
   ============================================================ */
:root.dark, [data-theme="dark"] {
  --bg:           #1F1F1E;
  --bg-elevated:  #2C2C2A;
  --bg-sunken:    #171716;
  --bg-inset:     #3A3A37;
  --bg-hover:     rgba(192, 191, 181, 0.05);
  --bg-active:    rgba(192, 191, 181, 0.09);

  --fg:           #C0BFB5;
  --fg-muted:     #90908A;
  --fg-subtle:    #6E6E66;
  --fg-faint:     #4E4E47;
  --fg-inverse:   #1F1F1E;

  --border:        #3C3C3B;
  --border-strong: #4F4F4D;
  --border-subtle: #2A2A28;

  --accent:        #5F8D42;
  --accent-hover:  #79a052;
  --accent-press:  #4c7235;
  --accent-soft:   rgba(95, 141, 66, 0.16);
  --accent-fg:     #ffffff;

  --success: #79a052;
  --warning: #cea35a;
  --danger:  #d76a5f;
  --info:    #6ea1bf;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7), 0 6px 18px rgba(0, 0, 0, 0.45);
  --ring-focus: 0 0 0 2px rgba(121, 160, 82, 0.25);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
body {
  font: var(--type-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif       { font-family: var(--font-serif); }
.sans        { font-family: var(--font-sans); }
.mono        { font-family: var(--font-mono); }

.display-2xl { font: var(--type-display-2xl); letter-spacing: var(--tracking-tight); }
.display-xl  { font: var(--type-display-xl);  letter-spacing: var(--tracking-tight); }
.display-lg  { font: var(--type-display-lg);  letter-spacing: var(--tracking-snug); }
.display-md  { font: var(--type-display-md);  letter-spacing: var(--tracking-snug); }
.display-sm  { font: var(--type-display-sm);  letter-spacing: var(--tracking-snug); }

h1, .h1      { font: var(--type-h1); letter-spacing: var(--tracking-snug); }
h2, .h2      { font: var(--type-h2); letter-spacing: var(--tracking-snug); }
h3, .h3      { font: var(--type-h3); }
h4, .h4      { font: var(--type-h4); }
h5, .h5      { font: var(--type-h5); }

p, .body     { font: var(--type-body); color: var(--fg-muted); }
.body-lg     { font: var(--type-body-lg); color: var(--fg-muted); }
.body-sm     { font: var(--type-body-sm); color: var(--fg-muted); }
.caption     { font: var(--type-caption); color: var(--fg-subtle); }
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

code, kbd, samp, pre, .code {
  font: var(--type-code);
  color: var(--fg);
}