/* ============================================================
   PAGELY — Design Tokens  v1.0
   Single source of truth for all brand values.
   Import this file first in any project.
   ============================================================ */

:root {

  /* ── BRAND COLORS ─────────────────────────────────────── */

  /* Primary — Pagely Green */
  --color-green-50:  #d4eddf;
  --color-green-100: #b8deca;
  --color-green-200: #9fd4b8;
  --color-green-300: #6ec99a;
  --color-green-400: #52b585;
  --color-green-500: #3d9970;   /* ← Brand primary */
  --color-green-600: #2d7a57;
  --color-green-700: #1f5c3f;
  --color-green-800: #1a4a33;
  --color-green-900: #0f2b1e;

  /* Neutrals */
  --color-ink:        #0e0e0e;   /* Background dark */
  --color-carbon:     #1e1e1e;   /* Card / surface dark */
  --color-graphite:   #2a2a2a;   /* Border dark */
  --color-slate:      #444444;   /* Muted text */
  --color-ash:        #666666;   /* Placeholder */
  --color-silver:     #888888;   /* Secondary text */
  --color-fog:        #aaaaaa;   /* Tertiary text */
  --color-mist:       #cccccc;   /* Light border */
  --color-parchment:  #f0ece4;   /* Background light */
  --color-white:      #ffffff;

  /* Forest (dark green surfaces) */
  --color-forest-deep:    #0f2018;
  --color-forest-mid:     #1a2e22;
  --color-forest-border:  #1e3828;

  /* Accents */
  --color-amber:      #c8a96e;
  --color-amber-dark: #8b7355;
  --color-red:        #e05c4b;
  --color-blue:       #4a7fa0;

  /* ── SEMANTIC COLORS (light mode) ────────────────────── */
  --bg-primary:       var(--color-parchment);
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #f5f1eb;
  --bg-inverse:       var(--color-ink);

  --text-primary:     #1a1a1a;
  --text-secondary:   #444444;
  --text-tertiary:    #777777;
  --text-inverse:     var(--color-parchment);
  --text-brand:       var(--color-green-500);

  --border-default:   #e0dcd4;
  --border-strong:    #c8c4bc;
  --border-brand:     var(--color-green-500);

  --surface-brand:    var(--color-green-50);
  --surface-brand-mid: var(--color-green-100);

  /* ── SEMANTIC COLORS (dark mode) ─────────────────────── */
  --bg-primary-dark:      var(--color-ink);
  --bg-secondary-dark:    var(--color-carbon);
  --bg-tertiary-dark:     #161616;

  --text-primary-dark:    #f0ece4;
  --text-secondary-dark:  #c8c4bc;
  --text-tertiary-dark:   #777777;

  --border-default-dark:  #1e1e1e;
  --border-strong-dark:   #2a2a2a;

  --surface-brand-dark:   var(--color-green-900);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */

  /* Font families */
  --font-display:  'DM Serif Display', 'Georgia', serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;

  /* ── 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-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 48px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-brand: 0 4px 16px rgba(61,153,112,0.20);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --sidebar-width:   240px;
  --sidebar-collapsed: 60px;
  --topbar-height:    52px;
}

/* ── DARK MODE OVERRIDES ──────────────────────────────────── */
[data-theme="dark"], .dark {
  --bg-primary:    var(--bg-primary-dark);
  --bg-secondary:  var(--bg-secondary-dark);
  --bg-tertiary:   var(--bg-tertiary-dark);

  --text-primary:   var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-tertiary:  var(--text-tertiary-dark);

  --border-default: var(--border-default-dark);
  --border-strong:  var(--border-strong-dark);

  --surface-brand:  var(--surface-brand-dark);
}

/* ── TYPOGRAPHY BASE ──────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
}