/* ==========================================================================
   AdWise Marketing — Design tokens
   Ported from the AdWise Marketing Design System (colors / typography /
   spacing / effects). Nothing here should ever be page specific.
   ========================================================================== */

/* ---------- Palette ---------- */
:root {
  /* Gold (brand primary) */
  --gold-50: #FFF8E6;
  --gold-100: #FFEDBF;
  --gold-200: #FEDD85;
  --gold-300: #FDCB4B;
  --gold-400: #FDBE24;
  --gold-500: #FDB813; /* AdWise Gold — the core mark color */
  --gold-600: #E5A200;
  --gold-700: #B87E00;
  --gold-800: #8A5D00;
  --gold-900: #5C3D00;

  /* Ink (warm-black biased neutrals) */
  --white: #FFFFFF;
  --ink-50: #F6F6F5;
  --ink-100: #E7E7E5;
  --ink-200: #C9C9C6;
  --ink-300: #9C9C98;
  --ink-400: #6F6F6B;
  --ink-500: #4C4C49;
  --ink-600: #333331;
  --ink-700: #242422;
  --ink-800: #181816;
  --ink-900: #0E0E0D;
  --ink-950: #000000; /* logo canvas */

  /* Status */
  --green-500: #28B463;
  --green-600: #1E9251;
  --red-500: #E5484D;
  --red-600: #C23539;
  --blue-500: #3B82F6;
  --blue-600: #2E6AD1;
  --whatsapp: #25D366;
}

/* ---------- Typography ---------- */
:root {
  --font-display: 'Unbounded', 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 600;

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;
  --fs-4xl: 52px;
  --fs-5xl: 64px;
  --fs-6xl: 84px;

  --lh-tight: 1.08;
  --lh-snug: 1.24;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: -0.01em;
  --ls-wide: 0.06em;
  --ls-wider: 0.16em;
}

/* ---------- Spacing, radii, layout ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --bw-hair: 1px;
  --bw-1: 1.5px;
  --bw-2: 2px;
  --bw-accent: 3px;

  --container: 1240px;
  --gutter: 32px;
  --header-h: 76px;
}

/* ---------- Motion ---------- */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
}

/* ==========================================================================
   Semantic aliases — dark is the brand-native theme (the logo lives on black)
   ========================================================================== */
:root,
[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-subtle: var(--ink-900);
  --surface-1: #0E0E0D;
  --surface-2: #171715;
  --surface-3: #201F1D;
  --surface-inset: #0A0A09;

  --border: #262523;
  --border-strong: #3A3936;
  --divider: var(--gold-500);

  --text-strong: var(--white);
  --text-body: #E7E7E5;
  --text-muted: #9C9C98;
  --text-faint: #6F6F6B;
  --text-on-accent: var(--ink-950);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);
  --accent-soft: rgba(253, 184, 19, .14);
  --accent-ring: rgba(253, 184, 19, .45);

  --success: var(--green-500);
  --danger: var(--red-500);
  --info: var(--blue-500);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
  --shadow-glow: 0 6px 26px rgba(253, 184, 19, .32);
  --shadow-glow-sm: 0 2px 12px rgba(253, 184, 19, .28);

  --ring: 0 0 0 3px var(--accent-ring);

  color-scheme: dark;
}

/* Light theme — airy neutral canvas, white cards, #E0E0E0 strokes */
[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-subtle: #F9F9F9;
  --surface-1: #FFFFFF;
  --surface-2: #F9F9F9;
  --surface-3: #F3F3F3;
  --surface-inset: #F9F9F9;

  --border: #E0E0E0;
  --border-strong: #BABABA;

  --text-strong: #000000;
  --text-body: #24282D;
  --text-muted: #757B83;
  --text-faint: #BABABA;
  --text-on-accent: var(--ink-950);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-press: var(--gold-700);
  --accent-soft: rgba(253, 184, 19, .16);
  --accent-ring: rgba(229, 162, 0, .5);

  --shadow-xs: 0 1px 2px rgba(20, 20, 18, .06);
  --shadow-sm: 0 2px 8px rgba(20, 20, 18, .08);
  --shadow-md: 0 8px 24px rgba(20, 20, 18, .10);
  --shadow-lg: 0 18px 48px rgba(20, 20, 18, .14);

  color-scheme: light;
}