/* ============================================================
   Paskana Design System — Foundations
   Colors, type, spacing, radii, shadows, motion
   ============================================================ */

/* --- Fonts (Google Fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLOR ============ */

  /* Sage — primary brand */
  --sage-900: #1F3A32;
  --sage-700: #2E5448;
  --sage-600: #3D6A5C;   /* default primary */
  --sage-500: #4F8473;
  --sage-300: #A8C2B8;
  --sage-100: #DCE7E1;
  --sage-50:  #ECF2EE;

  /* Clay — accent */
  --clay-700: #8E4A2C;
  --clay-600: #B26340;   /* default accent */
  --clay-500: #C97B5A;
  --clay-300: #E5B59A;
  --clay-100: #F3E1D5;

  /* Ink — neutrals (cool-leaning, slightly green-tinted blacks) */
  --ink-900: #1B2420;
  --ink-800: #2A332F;
  --ink-700: #3C4843;
  --ink-500: #6B7872;
  --ink-400: #8C9892;
  --ink-300: #B8C0BB;
  --ink-200: #D7DCD8;
  --ink-100: #E8ECE9;

  /* Sand — warm neutrals (backgrounds) */
  --sand-50:  #FAF7F2;
  --sand-100: #F5EFE6;
  --sand-200: #EAE3D6;
  --sand-300: #DDD2BE;

  /* Surface */
  --surface: #FFFFFF;
  --surface-alt: var(--sand-100);

  /* Data viz */
  --sky-500: #6B8FAE;
  --sky-300: #B0C4D6;
  --gold-500: #C9A961;
  --gold-300: #E5D4A4;

  /* Semantic */
  --success: #4F8473;
  --success-bg: #DCE7E1;
  --warning: #C9A961;
  --warning-bg: #F4EBCF;
  --danger:  #B0473A;
  --danger-bg: #F3D9D5;
  --info:    #6B8FAE;
  --info-bg: #DCE6EE;

  /* Semantic FG/BG aliases */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary */
  --fg-3: var(--ink-500);   /* tertiary / captions */
  --fg-4: var(--ink-400);   /* placeholder */
  --fg-onbrand: #FAF7F2;

  --bg-app: var(--sand-50);
  --bg-section: var(--sand-100);
  --bg-card: var(--surface);
  --bg-muted: var(--ink-100);

  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--sage-600);

  --link: var(--sage-600);
  --link-hover: var(--sage-700);

  /* ============ TYPE ============ */
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:  'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* Sizes (rem assumes 16px root) */
  --fs-display:  3rem;     /* 48 */
  --fs-h1:       2rem;     /* 32 */
  --fs-h2:       1.5rem;   /* 24 */
  --fs-h3:       1.25rem;  /* 20 */
  --fs-body-lg:  1.0625rem;/* 17 */
  --fs-body:     0.9375rem;/* 15 */
  --fs-caption:  0.8125rem;/* 13 */
  --fs-micro:    0.6875rem;/* 11 */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* ============ SPACING ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;

  /* ============ RADII ============ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-1: 0 1px 2px rgba(27, 36, 32, 0.04), 0 1px 1px rgba(27, 36, 32, 0.03);
  --shadow-2: 0 4px 12px rgba(27, 36, 32, 0.06), 0 2px 4px rgba(27, 36, 32, 0.04);
  --shadow-3: 0 12px 32px rgba(27, 36, 32, 0.08), 0 4px 8px rgba(27, 36, 32, 0.05);
  --shadow-focus: 0 0 0 2px var(--sand-50), 0 0 0 4px var(--sage-600);

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro: 120ms;
  --dur-base: 200ms;
  --dur-sheet: 320ms;
  --dur-page: 480ms;

  /* ============ LAYOUT ============ */
  --gutter-mobile: 20px;
  --gutter-desktop: 32px;
  --max-marketing: 1120px;
  --max-app: 960px;
  --touch: 44px;
}

/* ============================================================
   Semantic / element defaults
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — reserved for marketing/brand */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}

/* Headings */
.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

/* Body */
.t-body-lg, p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-body, p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.t-caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-3);
}
.t-eyebrow {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.t-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  color: var(--fg-1);
}

/* Brand wordmark default */
.t-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-style: italic;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Reset list, hr defaults used in cards */
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }