/* ==========================================================================
   Vidzy Design System — CSS Custom Properties
   Translated from iOS app (Plus Jakarta Sans, 8pt grid, D115 hybrid colors)
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Plus Jakarta Sans (self-hosted woff2)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   :root — Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* -- Colors (D115 hybrid scheme) ---------------------------------------- */
  --color-bg: #0D0D0D;
  --color-surface: #1A1A1A;
  --color-surface-elevated: #262626;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #CCCCCC;
  --color-text-tertiary: #999999;
  --color-accent: #59D975;
  --color-purple: #9B7AE3;
  --color-purple-dim: #7B5CC3;
  --color-orange: #FF8C33;
  --color-gold: #FFD94D;
  --color-destructive: #F25959;
  --color-success: #59D975;
  --color-warning: #FFAA00;
  --color-border: #333333;

  /* -- Typography --------------------------------------------------------- */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale: name — size / line-height */
  --text-display-large: 40px;
  --text-display-large-lh: 48px;
  --text-display-medium: 32px;
  --text-display-medium-lh: 40px;
  --text-heading-large: 24px;
  --text-heading-large-lh: 32px;
  --text-heading-medium: 20px;
  --text-heading-medium-lh: 28px;
  --text-body-large: 17px;
  --text-body-large-lh: 26px;
  --text-body-medium: 15px;
  --text-body-medium-lh: 22px;
  --text-body-small: 13px;
  --text-body-small-lh: 18px;
  --text-label: 13px;
  --text-label-lh: 16px;
  --text-caption: 11px;
  --text-caption-lh: 14px;

  /* -- Spacing (8pt grid) ------------------------------------------------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* -- Layout Constants --------------------------------------------------- */
  --screen-padding: 20px;
  --corner-radius: 12px;
  --corner-radius-sm: 8px;
  --corner-radius-lg: 16px;
  --button-height: 56px;
  --min-touch-target: 44px;
  --max-content-width: 1200px;
  --header-height: 72px;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Typography Utility Classes
   -------------------------------------------------------------------------- */

.text-display-large {
  font-size: var(--text-display-large);
  line-height: var(--text-display-large-lh);
  font-weight: var(--font-weight-bold);
}

.text-display-medium {
  font-size: var(--text-display-medium);
  line-height: var(--text-display-medium-lh);
  font-weight: var(--font-weight-bold);
}

.text-heading-large {
  font-size: var(--text-heading-large);
  line-height: var(--text-heading-large-lh);
  font-weight: var(--font-weight-semibold);
}

.text-heading-medium {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
}

.text-body-large {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  font-weight: var(--font-weight-regular);
}

.text-body-medium {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  font-weight: var(--font-weight-regular);
}

.text-body-small {
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  font-weight: var(--font-weight-regular);
}

.text-label {
  font-size: var(--text-label);
  line-height: var(--text-label-lh);
  font-weight: var(--font-weight-medium);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  font-weight: var(--font-weight-regular);
}

/* Color utility classes */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent); }
.text-purple { color: var(--color-purple); }