/* ============================================================
   Banafib · 01 TOKENS
   Design variables: color, type, spacing, radii, effects.
   Clean, modern, high-tech slate dark-mode.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- Colors (Tech Light Theme) --- */
  --bg-dark: #ffffff;        /* Main page background (White) */
  --bg-card: #ffffff;        /* Card background (White) */
  --bg-alt: #f8fafc;         /* Section alt background (Light Slate 50) */
  --text-strong: #0f172a;    /* Titles and high contrast text (Slate 900) */
  --text-body: #334155;      /* Standard paragraph text (Slate 700) */
  --text-muted: #64748b;     /* Muted labels (Slate 500) */
  --white: #ffffff;

  /* --- Brand Core Colors (Eco-Friendly Green) --- */
  --cyan-primary: #16a34a;   /* Primary Eco Green (Green 600) */
  --cyan-hover: #15803d;     /* Primary Hover State (Green 700) */
  --cyan-light: #22c55e;     /* Primary Highlight (Green 500) */
  --cyan-dim: rgba(22, 163, 74, 0.08); /* Low opacity Green */
  
  --blue-secondary: #166534; /* Secondary Dark Green (Green 800) */
  --blue-hover: #14532d;     /* Secondary Hover State (Green 900) */
  --blue-dim: rgba(22, 101, 52, 0.08);

  /* --- Semantic Aliases --- */
  --text-inverse: var(--white);
  --surface-page: var(--bg-dark);
  --surface-alt: var(--bg-alt);
  --surface-card: var(--bg-card);
  --surface-cyan: var(--cyan-primary);

  --brand-primary: var(--cyan-primary);
  --brand-secondary: var(--blue-secondary);

  --border-strong: var(--cyan-primary);
  --border-subtle: #e2e8f0;  /* Slate 200 */
  --border-card: #cbd5e1;    /* Slate 300 */
  --border-focus: var(--cyan-primary);

  /* --- Typography --- */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-xs: 0.98rem;
  --text-sm: 1.1rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* --- Spacing (8px Grid System) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  /* --- Radii --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* --- Borders --- */
  --border-hair: 1px;
  --border-rule: 1.5px;
  --border-bold: 2px;

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-5);
  --section-y: var(--space-16);

  /* --- Effects --- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  /* Solid Cyber shadow (tech flat signature) */
  --shadow-flat-cyan: 4px 4px 0 0 var(--cyan-primary);
  --shadow-flat-blue: 4px 4px 0 0 var(--blue-secondary);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}