/*
  variables.css
  Design tokens — single source of truth.
  WP PORTING NOTE: when this becomes a WordPress theme, these tokens map 1:1
  onto theme.json "settings.color.palette" / "settings.typography" entries,
  so keep names stable.
*/
:root {
  /* ── Color: surfaces ── */
  --white: #ffffff;
  --soft: #f2f7f3;      /* light section tint */
  --soft-2: #e8f0ea;    /* table zebra / hover */
  --ink: #0c150e;       /* primary text on light */
  --muted: #5c6a60;     /* secondary text on light */
  --charcoal: #82858b;   /* Xingfa grey, brightened ~10% for on-screen contrast */
  --steel: #93969b;      /* dark surface, one step lighter */
  --mid: #a4a7ab;        /* dark surface, lightest step */
  --on-dark: #ffffff;   /* text on charcoal/steel/mid */
  --on-dark-muted: #e2e3e5;

  /* ── Color: brand palette — 60% white / 30% green / 10% orange accent ── */
  --green: #2E7D32;
  --green-mid: #388e3c;
  --green-light: #4caf50;
  --green-tint: rgba(46, 125, 50, 0.12);
  --green-tint-strong: rgba(46, 125, 50, 0.28);
  --accent: #F59E0B;
  --accent-light: #fbbf24;
  --accent-dark: #d97706;
  --accent-tint: rgba(245, 158, 11, 0.14);

  /* ── Color: status ── */
  --danger: #ef4444;
  --info: #3b82f6;
  --warning: #eab308;

  --border: rgba(10, 20, 10, 0.1);
  --border-dark: rgba(255, 255, 255, 0.12);

  /* ── Typography ── */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* ── Radius / shadow / motion ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(10, 20, 10, .05);
  --shadow-md: 0 16px 32px rgba(10, 20, 10, .08);
  --shadow-lg: 0 20px 44px rgba(10, 20, 10, .12);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur-mid: .3s;
  --dur-slow: .6s;

  /* ── Layout ── */
  --container: 1280px;
  --header-h: 68px;
}