/* Nonito brand tokens. Single source of truth for color, type, spacing, radius, shadow. */
/* Import: <link rel="stylesheet" href="../assets/tokens.css"> from any component HTML. */

:root {
  /* Color: primary brand blue */
  --nonito-primary: #0147EB;
  --nonito-primary-dark: #0058DD;
  --nonito-primary-light: #4D7BF0;
  --nonito-primary-subtle: #DBE6FF;

  /* Color: navy (text and dark surfaces) */
  --nonito-navy: #030F2D;
  --nonito-navy-soft: #1A2540;

  /* Color: neutrals and surfaces */
  --nonito-white: #FFFFFF;
  --nonito-surface: #EDF1FA;
  --nonito-surface-warm: #F7F2EB;
  --nonito-surface-cool: #F5F6F8;
  --nonito-gray-200: #E5E7EB;
  --nonito-gray-400: #9CA3AF;
  --nonito-gray-500: #6B7280;
  --nonito-gray-700: #374151;

  /* Color: status (sparingly) */
  --nonito-success: #16A34A;
  --nonito-warning: #F59E0B;
  --nonito-error: #DC2626;
  --nonito-info: #0070F3;

  /* Color: channel accents (only when labeling channels) */
  --nonito-channel-whatsapp: #25D366;
  --nonito-channel-shopify: #96BF48;

  /* Signature gradient */
  --nonito-gradient-navy-blue: linear-gradient(180deg, #030F2D 0%, #0147EB 100%);
  --nonito-gradient-blue-navy: linear-gradient(170deg, #030F2D 40%, #0147EB 100%);

  /* Typography families */
  --nonito-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --nonito-font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --nonito-font-mono: Menlo, Monaco, 'Lucida Console', monospace;

  /* Type scale (px) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-48: 48px;
  --fs-64: 64px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-comfortable: 1.5;
  --lh-relaxed: 1.65;

  /* Spacing scale (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 40px rgba(1, 71, 235, 0.30), 0 0 80px rgba(1, 71, 235, 0.10);

  /* Transition */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 320ms ease;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
}

/* Font faces. Drop the matching .woff2 files into assets/fonts/, otherwise Google Fonts is the fallback (load it in the HTML head). */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Semantic type styles */
.nonito-display { font-family: var(--nonito-font-heading); font-weight: 700; font-size: var(--fs-64); line-height: var(--lh-tight); color: var(--nonito-navy); letter-spacing: -0.02em; }
.nonito-h1      { font-family: var(--nonito-font-heading); font-weight: 700; font-size: var(--fs-48); line-height: var(--lh-snug); color: var(--nonito-navy); letter-spacing: -0.01em; }
.nonito-h2      { font-family: var(--nonito-font-heading); font-weight: 600; font-size: var(--fs-32); line-height: var(--lh-snug); color: var(--nonito-navy); }
.nonito-h3      { font-family: var(--nonito-font-heading); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-normal); color: var(--nonito-navy); }
.nonito-h4      { font-family: var(--nonito-font-heading); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-normal); color: var(--nonito-navy); }
.nonito-lead    { font-family: var(--nonito-font-body); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--nonito-gray-700); }
.nonito-body    { font-family: var(--nonito-font-body); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-comfortable); color: var(--nonito-navy); }
.nonito-body-sm { font-family: var(--nonito-font-body); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-comfortable); color: var(--nonito-gray-700); }
.nonito-caption { font-family: var(--nonito-font-body); font-weight: 400; font-size: var(--fs-12); line-height: var(--lh-comfortable); color: var(--nonito-gray-500); }
.nonito-eyebrow { font-family: var(--nonito-font-heading); font-weight: 600; font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--nonito-primary); text-transform: uppercase; letter-spacing: 0.2em; }
.nonito-cta     { font-family: var(--nonito-font-body); font-weight: 700; font-size: var(--fs-16); line-height: 1; }
.nonito-mono    { font-family: var(--nonito-font-mono); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-comfortable); }

/* Component primitives, inherit from tokens. Use directly or as a base in your own CSS. */
.nonito-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-xs);
  border: none;
  font-family: var(--nonito-font-body);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-base), transform var(--t-fast);
  text-decoration: none;
}
.nonito-btn-primary {
  background: var(--nonito-primary);
  color: var(--nonito-white);
}
.nonito-btn-primary:hover {
  background: var(--nonito-primary-dark);
}
.nonito-btn-secondary {
  background: var(--nonito-white);
  color: var(--nonito-navy);
  border: 1px solid var(--nonito-gray-200);
}
.nonito-btn-secondary:hover {
  border-color: var(--nonito-navy);
}
.nonito-btn-ghost {
  background: transparent;
  color: var(--nonito-primary);
}
.nonito-btn-ghost:hover {
  background: var(--nonito-primary-subtle);
}
.nonito-btn[disabled] {
  background: var(--nonito-gray-200);
  color: var(--nonito-gray-400);
  cursor: not-allowed;
}

.nonito-card {
  background: var(--nonito-white);
  border: 1px solid var(--nonito-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.nonito-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--nonito-font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1;
  background: var(--nonito-primary-subtle);
  color: var(--nonito-primary);
}
.nonito-badge-success { background: #DCFCE7; color: var(--nonito-success); }
.nonito-badge-warning { background: #FEF3C7; color: var(--nonito-warning); }
.nonito-badge-error   { background: #FEE2E2; color: var(--nonito-error); }

.nonito-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--nonito-gray-200);
  border-radius: var(--radius-xs);
  font-family: var(--nonito-font-body);
  font-size: var(--fs-16);
  color: var(--nonito-navy);
  background: var(--nonito-white);
  caret-color: var(--nonito-primary);
  outline: none;
  transition: border-color var(--t-base);
}
.nonito-input:focus {
  border-color: var(--nonito-primary);
  box-shadow: 0 0 0 3px var(--nonito-primary-subtle);
}