/* ============================================================
   CIRCULAR — DESIGN TOKENS
   Sourced verbatim from the "Circular Comm Design System"
   (fonts + colors + typography + spacing/radii/shadows/motion).
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Closest Google Fonts matches to the rounded "circular" wordmark
   and product UI. Swap for local @font-face if brand fonts surface.
   - Nunito        → display / wordmark feel
   - Nunito Sans   → product UI & body
   - JetBrains Mono → codes, IDs, tabular data
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

  /* ---- Brand green scale ---------------------------------- */
  --green-50:  #E9F8F0;
  --green-100: #C9EEDC;
  --green-200: #99E0C0;
  --green-300: #5FCE9D;
  --green-400: #2FBA81;
  --green-500: #18AE69;  /* brand pin green — the logo */
  --green-600: #009965;  /* action green — primary buttons, links */
  --green-700: #007E52;  /* hover / pressed */
  --green-800: #045F40;  /* deep forest — illustration shadows */
  --green-900: #0B3B2A;

  /* ---- Ink: deep forest-tinted neutrals ------------------- */
  --ink-900: #14241C;
  --ink-800: #1F2A26;
  --slate-900: #0F172A;
  --slate-800: #1E293B;  /* primary body text */
  --slate-700: #334155;
  --slate-600: #475569;  /* secondary text */
  --slate-500: #64748B;  /* muted / meta labels */
  --slate-400: #94A3B8;  /* placeholder, disabled text */
  --slate-300: #CBD5E1;  /* borders (strong) */
  --slate-200: #E2E8F0;  /* borders (default) */
  --slate-100: #F1F5F9;  /* subtle fills */
  --slate-50:  #F8FAFC;  /* page / table-header surface */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Secondary brand palette (from illustrations) ------- */
  --gold-400:  #F4CE4B;
  --gold-500:  #EBC02E;
  --gold-600:  #D9A916;
  --terracotta-400: #E8814A;
  --terracotta-500: #DE6320;
  --terracotta-600: #C24F12;
  --teal-500:  #1C7A66;
  --sky-300:   #BFE3E6;
  --wheat-200: #E9DCA8;

  /* ---- Semantic status ------------------------------------ */
  --success: #1C7A4F;
  --success-bg: #DAF3E5;
  --success-border: #A7E0C4;

  --danger: #D23B3B;
  --danger-bg: #FBE2E2;
  --danger-border: #F4BEBE;

  --warning: #B7791F;
  --warning-bg: #FBEFCE;
  --warning-border: #F1D98A;

  --info: #2563C9;
  --info-bg: #DCE9FB;
  --info-border: #B6D0F5;

  /* ---- Semantic aliases (use these in components) --------- */
  --brand: var(--green-600);
  --brand-strong: var(--green-700);
  --brand-soft: var(--green-50);

  --text-strong: var(--slate-900);
  --text-body: var(--slate-800);
  --text-muted: var(--slate-500);
  --text-on-brand: var(--white);
  --text-link: var(--green-600);

  --surface-page: var(--slate-50);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-50);
  --surface-hover: var(--slate-100);
  --surface-brand: var(--green-600);
  --surface-brand-soft: var(--green-50);

  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);
  --border-focus: var(--green-600);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 35%, transparent);

  /* Dark marketing surface (hero / footer / traction) */
  --surface-dark: #0B140F;
  --scrim-dark: rgba(7, 15, 11, 0.88);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* ---- Families ------------------------------------------- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights -------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---- Type scale (px) ------------------------------------ */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-7xl: 80px;

  /* ---- Line heights --------------------------------------- */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ------------------------------------- */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
  --tracking-caps: 0.08em;

  /* ============================================================
     SPACING / RADII / SHADOWS / MOTION
     ============================================================ */

  /* ---- Spacing scale (4px base) --------------------------- */
  --space-0: 0;
  --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-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;     /* buttons, inputs */
  --radius-xl: 14px;     /* cards */
  --radius-2xl: 20px;    /* feature panels */
  --radius-pill: 999px;  /* badges, avatars, tabs */

  /* ---- Border widths -------------------------------------- */
  --border-thin: 1px;
  --border-thick: 1.5px;

  /* ---- Shadows -------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-brand: 0 6px 18px rgba(0, 153, 101, 0.28);

  /* ---- Z-index -------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  /* ---- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout maxima -------------------------------------- */
  --container-app: 1280px;
  --container-prose: 720px;
}