/**
 * AFTER Design System — Colors & Typography
 * Source of truth: app/tailwind.config.js + src/app/ screens
 * Fonts: DM Sans (Google Fonts), DM Serif Display (Google Fonts)
 */

/* DM Serif Display: Google Fonts (no local files uploaded) */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

/* DM Sans: brand-uploaded local files (DMSans_18pt-* — optical size for UI/body copy) */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans_18pt-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* DM Sans Display (DMSans_36pt-*) — for large display numerics & extra-bold treatments */
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans Display';
  src: url('fonts/DMSans_36pt-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────
   COLOR TOKENS
───────────────────────────────────────── */
:root {
  /* Base palette */
  --color-cream:        #fafaf8;   /* App background */
  --color-black:        #0f0f0f;   /* Primary text */
  --color-green:        #3d6b4f;   /* Brand primary — buttons, links, active states */
  --color-green-light:  #e8f0eb;   /* Chip backgrounds, coach bubble bg */
  --color-gray:         #6b6b6b;   /* Secondary text, placeholders */
  --color-gray-light:   #f0efed;   /* Subtle backgrounds */
  --color-border:       #e2e0db;   /* Dividers, card borders, input borders */
  --color-tab-inactive: #a1a1aa;   /* Inactive tab icons */

  /* Semantic aliases */
  --bg:           var(--color-cream);
  --bg-subtle:    var(--color-gray-light);
  --fg-primary:   var(--color-black);
  --fg-secondary: var(--color-gray);
  --fg-on-brand:  var(--color-cream);
  --accent:       var(--color-green);
  --accent-light: var(--color-green-light);
  --border:       var(--color-border);

  /* Status */
  --color-error:       #dc2626;
  --color-error-bg:    #fef2f2;
  --color-error-border:#fecaca;

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

  /* Font families */
  --font-sans:         'DM Sans', system-ui, sans-serif;        /* 18pt optical — body/UI */
  --font-sans-display: 'DM Sans Display', 'DM Sans', system-ui; /* 36pt optical — large numerics, hero */
  --font-serif:        'DM Serif Display', Georgia, serif;

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

  /* Font sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-wide: 0.05em;  /* Used on uppercase labels */

  /* ─────────────────────────────────────────
     SPACING & LAYOUT TOKENS
  ───────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─────────────────────────────────────────
     RADIUS TOKENS
  ───────────────────────────────────────── */
  --radius-sm:   0.5rem;    /* 8px — inputs (rounded-lg) */
  --radius-md:   0.75rem;   /* 12px — buttons (rounded-xl) */
  --radius-lg:   1rem;      /* 16px — cards (rounded-2xl) */
  --radius-full: 9999px;    /* pills, circular buttons */

  /* ─────────────────────────────────────────
     ELEVATION / SHADOW
  ───────────────────────────────────────── */
  /* The app uses border + bg for cards — no box-shadow system */
  --card-border: 1px solid var(--border);

  /* ─────────────────────────────────────────
     COMPONENT HEIGHTS
  ───────────────────────────────────────── */
  --height-input:  3rem;   /* 48px — h-12 */
  --height-button: 3rem;   /* 48px — h-12 */
  --height-icon-button: 3rem; /* 48px — circular send button */
}

/* ─────────────────────────────────────────
   SEMANTIC TYPE STYLES
───────────────────────────────────────── */

/* Display / hero headings — DM Serif Display */
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.display-lg {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.display-md {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

/* Body copy — DM Sans */
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.body-md {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

/* Labels / UI text */
.label-md {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.label-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Numeric display (weight readout) — uses 36pt optical size */
.num-xl {
  font-family: var(--font-sans-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
  font-feature-settings: 'tnum' 1; /* tabular figures for weight tracking */
}