/*
 * TapTips design tokens (design system v0.2: Bricolage display, flatter surfaces).
 *
 * Single source for colour, type, spacing, radii, shadow and motion values.
 * Every layout links this file first; Tailwind (tailwind.css) and the
 * hand-written stylesheets read these variables rather than repeating values.
 * Base element styles live in `@layer base` so Tailwind utilities and the
 * page stylesheets always win over them.
 */

/* Bricolage Grotesque: display and headings (variable 400-800, self-hosted) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/BricolageGrotesque-latin-b86257e5.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/BricolageGrotesque-latin-ext-f02b0791.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Poppins: display fallback */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/Poppins-400-d360be31.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/Poppins-500-afc692de.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/Poppins-600-765bd6dc.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/Poppins-700-96729a37.woff2") format('woff2'); }
/* DM Sans: body and UI (variable 400-700) */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/DMSans-400-fe3ac7ee.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/DMSans-400i-4ac0368a.woff2") format('woff2'); }
/* JetBrains Mono: links, slugs, transaction IDs (variable 400-600) */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/JetBrainsMono-400-8a992d39.woff2") format('woff2'); }

:root {
  /* Brand violet, anchored on #5730F2 */
  --violet-50: #f5f3ff; --violet-100: #ebe6fe; --violet-200: #d6ccfd;
  --violet-300: #b5a3fa; --violet-400: #8c6ff7; --violet-500: #5730f2;
  --violet-600: #4620e0; --violet-700: #3610d0; --violet-800: #2a0ca3;
  --violet-900: #1b0870;
  /* Ink */
  --ink-900: #0e0233; --ink-800: #1f1547; --ink-700: #3a3060;
  /* Violet-tinted neutrals */
  --gray-0: #ffffff; --gray-25: #fbfbfe; --gray-50: #f6f6fb;
  --gray-100: #efeef6; --gray-200: #e3e1ee; --gray-300: #cdcadd;
  --gray-400: #9d99b3; --gray-500: #6e6a86; --gray-600: #524e69;
  --gray-700: #3b3752;
  --sky-50: #f5fbff;
  /* Status */
  --green-50: #ecfdf5; --green-100: #d1fae5; --green-500: #10b981;
  --green-600: #059669; --green-800: #065f46;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-500: #ef4444;
  --red-600: #dc2626; --red-800: #991b1b;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-400: #fbbf24; --amber-500: #f59e0b;
  --amber-600: #d97706; --amber-800: #92400e;
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-500: #3b82f6;
  --blue-800: #1e40af;

  /* Semantic aliases */
  --brand: var(--violet-500); --brand-hover: var(--violet-600);
  --brand-press: var(--violet-700); --brand-soft: var(--violet-50);
  --brand-soft-2: var(--violet-100);
  --text-strong: var(--ink-900); --text-body: var(--gray-700);
  --text-muted: var(--gray-500); --text-subtle: var(--gray-400);
  --text-on-brand: #ffffff; --text-link: var(--violet-500);
  --text-link-hover: var(--violet-700);
  --surface-page: var(--gray-50); --surface-card: #ffffff;
  --surface-sunken: var(--gray-50); --surface-inverse: var(--ink-900);
  --surface-tint: var(--sky-50);
  --border-subtle: var(--gray-100); --border-default: var(--gray-200);
  --border-strong: var(--gray-300); --border-focus: var(--violet-500);
  --success: var(--green-500); --success-strong: var(--green-600);
  --success-soft: var(--green-50); --success-text: var(--green-800);
  --danger: var(--red-500); --danger-strong: var(--red-600);
  --danger-soft: var(--red-50); --danger-text: var(--red-800);
  --warning: var(--amber-500); --warning-soft: var(--amber-50);
  --warning-text: var(--amber-800);
  --info: var(--blue-500); --info-soft: var(--blue-50);
  --info-text: var(--blue-800);
  --focus-ring: 0 0 0 3px rgba(87, 48, 242, 0.22);
  --gradient-brand: linear-gradient(135deg, var(--ink-900) 0%, var(--violet-500) 100%);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px;
  --fs-6xl: 60px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55;
  --tracking-display: -0.04em; --tracking-tight: -0.025em; --tracking-snug: -0.01em; --tracking-caps: 0.06em;
  --type-hero: 600 var(--fs-6xl)/1.02 var(--font-display);
  --type-h1: 600 var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --type-h2: 600 var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --type-h3: 600 var(--fs-lg)/var(--lh-snug) var(--font-display);
  --type-body: 400 var(--fs-md)/var(--lh-body) var(--font-body);
  --type-body-sm: 400 var(--fs-sm)/var(--lh-body) var(--font-body);
  --type-label: 500 var(--fs-sm)/1.3 var(--font-body);
  --type-caption: 400 var(--fs-xs)/1.4 var(--font-body);
  --type-overline: 600 var(--fs-xs)/1.2 var(--font-body);
  --type-amount: 700 var(--fs-4xl)/1 var(--font-display);
  --type-mono: 500 var(--fs-sm)/1.4 var(--font-mono);

  /* Spacing and layout */
  --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;
  --container-app: 1152px; --container-marketing: 1200px;
  --container-checkout: 512px;
  --nav-height: 64px;
  --hit-min: 44px;

  /* Radii */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-pill: 9999px;
  --radius-button: var(--radius-pill); --radius-input: 12px;
  --radius-card: 24px; --radius-chip: 16px;

  /* Shadows: flat at rest (borders do the work), soft and wide on lift */
  --shadow-xs: 0 1px 2px rgba(14, 2, 51, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 2, 51, 0.05), 0 1px 1px rgba(14, 2, 51, 0.03);
  --shadow-md: 0 10px 24px -10px rgba(14, 2, 51, 0.14), 0 2px 6px -2px rgba(14, 2, 51, 0.05);
  --shadow-lg: 0 28px 56px -20px rgba(14, 2, 51, 0.24), 0 6px 14px -6px rgba(14, 2, 51, 0.07);
  --shadow-brand: 0 10px 24px -10px rgba(87, 48, 242, 0.6);
  --shadow-brand-sm: 0 2px 6px -2px rgba(87, 48, 242, 0.4);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --lift-hover: translateY(-1px);
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    font: var(--type-body);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
  }
  p { text-wrap: pretty; }
  a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast); }
  a:hover { color: var(--text-link-hover); }
}

@keyframes tt-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes tt-scale-in { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tt-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@keyframes tt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }