/* TRAIDM design tokens — self-contained copy for the deployable website */
/* ---- tokens/fonts.css ---- */
/*
  No font binaries were attached to this project (brief specifies Manrope/Sora
  for display + Inter for body, but shipped no .woff2/.ttf files). Loading the
  nearest-match families directly from Google Fonts as a flagged substitution —
  swap this @import for self-hosted @font-face + assets/fonts/*.woff2 the
  moment real files are provided.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');


/* ---- tokens/colors.css ---- */
:root {
  /* ---- Base palette (raw brand colors from brief) ---- */
  --black: #000000;
  --white: #FFFFFF;
  --gold: #FFBD39;
  --gold-hover: #FFCB5C;
  --ai-blue: #4F8CFF;
  --success: #00C853;
  --grey-100: #F7F8FA;
  --grey-900: #1B1B1B;

  /* extended greys for depth (derived, not in brief, needed for real UI) */
  --grey-50: #FCFCFD;
  --grey-200: #EDEEF2;
  --grey-300: #DEE0E6;
  --grey-500: #8A8F98;
  --grey-700: #45484F;
  --grey-800: #26272B;

  /* ---- Semantic aliases (light surface, default) ---- */
  --bg-page: var(--white);
  --bg-surface: var(--grey-100);
  --bg-surface-raised: var(--white);
  --bg-inverse: var(--black);

  --fg-primary: var(--black);
  --fg-secondary: var(--grey-700);
  --fg-muted: var(--grey-500);
  --fg-on-dark: var(--white);
  --fg-on-dark-muted: rgba(255,255,255,0.64);
  --fg-accent: var(--gold);
  --fg-ai: var(--ai-blue);
  --fg-success: var(--success);

  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-on-dark: rgba(255,255,255,0.14);

  --accent-gold: var(--gold);
  --accent-gold-hover: var(--gold-hover);
  --accent-ai: var(--ai-blue);

  /* glass / dark-luxury surfaces */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --glass-bg-light: rgba(0,0,0,0.04);
  --glass-border-light: rgba(0,0,0,0.08);

  /* focus ring */
  --focus-ring: 0 0 0 3px rgba(79,140,255,0.35);
}

/* Dark-luxury section scope — wrap any section with class="tr-dark" to flip
   surfaces to the black/gold "agency at night" treatment described in the brief. */
.tr-dark {
  --bg-page: var(--black);
  --bg-surface: var(--grey-900);
  --bg-surface-raised: var(--grey-800);
  --fg-primary: var(--white);
  --fg-secondary: rgba(255,255,255,0.78);
  --fg-muted: rgba(255,255,255,0.52);
  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.14);
}


/* ---- tokens/typography.css ---- */
:root {
  /* ---- Font families ---- */
  --font-display: 'Sora', 'Manrope', -apple-system, sans-serif;
  --font-heading: 'Manrope', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* ---- Weights ---- */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ---- Type scale (desktop; pages apply their own responsive clamp) ---- */
  --text-display-xl: 700 4.5rem/1.05 var(--font-display);
  --text-display-l:  700 3.25rem/1.08 var(--font-display);
  --text-h1: 800 2.5rem/1.12 var(--font-heading);
  --text-h2: 800 1.875rem/1.18 var(--font-heading);
  --text-h3: 700 1.375rem/1.3 var(--font-heading);
  --text-h4: 700 1.125rem/1.35 var(--font-heading);
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.65 var(--font-body);
  --text-body-sm: 400 0.875rem/1.55 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);
  --text-button: 600 0.9375rem/1 var(--font-body);
  --text-mono: 500 0.875rem/1.5 'SF Mono', 'Menlo', monospace;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-button: 0.05em; /* brief: buttons uppercase, 0.5px+ tracking */
  --tracking-eyebrow: 0.08em;
}


/* ---- tokens/spacing.css ---- */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --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;
  --space-32: 128px;

  /* ---- Radii (from brief) ---- */
  --radius-button: 18px;
  --radius-card: 24px;
  --radius-image: 28px;
  --radius-pill: 999px;
  --radius-sm: 10px;

  /* ---- Shadows: soft, floating, "Apple style" ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-float: 0 20px 40px -12px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.08);
  --shadow-hover: 0 24px 48px -12px rgba(0,0,0,0.22), 0 10px 20px -8px rgba(0,0,0,0.10);
  --shadow-gold-glow: 0 8px 32px -6px rgba(255,189,57,0.45);
  --shadow-ai-glow: 0 8px 32px -6px rgba(79,140,255,0.4);
  --shadow-dark-card: 0 8px 30px rgba(0,0,0,0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 250ms; /* @kind other */
  --duration-slow: 500ms; /* @kind other */
  --duration-reveal: 700ms; /* @kind other */
}