/* CoreStream Creator Network Portal tokens.
   Plain CSS custom properties for direct use in server-rendered Django templates. */
:root {
  color-scheme: dark;

  /* Brand and semantic color */
  --cs-color-bg-deep: #03101F;
  --cs-color-bg: #05182D;
  --cs-color-surface: #0A2A4D;
  --cs-color-surface-raised: #0E3A5C;
  --cs-color-primary: #017EFF;
  --cs-color-primary-hover: #268FFF;
  --cs-color-primary-pressed: #006EDC;
  --cs-color-primary-ink: #03101F;
  --cs-color-light-blue: #CCE1F6;
  --cs-color-text: #EAF1FB;
  --cs-color-text-strong: #FFFFFF;
  --cs-color-text-muted: #9DB0C7;
  --cs-color-text-subtle: #8AA0BD;
  --cs-color-success: #1F9D57;
  --cs-color-danger: #D23F4D;
  --cs-color-warning: #9A7D10;
  --cs-color-line: rgba(255, 255, 255, 0.10);
  --cs-color-line-subtle: rgba(255, 255, 255, 0.08);
  --cs-color-line-strong: rgba(204, 225, 246, 0.26);
  --cs-color-focus-ring: rgba(1, 126, 255, 0.42);
  --cs-color-overlay: rgba(3, 16, 31, 0.72);
  --cs-color-field-bg: rgba(3, 16, 31, 0.56);
  --cs-color-field-bg-focus: rgba(3, 16, 31, 0.78);

  /* Tinted semantic surfaces */
  --cs-color-info-bg: rgba(1, 126, 255, 0.13);
  --cs-color-info-line: rgba(1, 126, 255, 0.42);
  --cs-color-success-bg: rgba(31, 157, 87, 0.15);
  --cs-color-success-line: rgba(31, 157, 87, 0.46);
  --cs-color-success-text: #BDEFD2;
  --cs-color-danger-bg: rgba(210, 63, 77, 0.15);
  --cs-color-danger-line: rgba(210, 63, 77, 0.52);
  --cs-color-danger-text: #FFC1C7;
  --cs-color-warning-bg: rgba(154, 125, 16, 0.18);
  --cs-color-warning-line: rgba(154, 125, 16, 0.56);
  --cs-color-warning-text: #F5D889;

  /* Typography */
  --cs-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cs-font-size-caption: 0.75rem;    /* 12px */
  --cs-font-size-small: 0.875rem;     /* 14px */
  --cs-font-size-body: 1rem;          /* 16px */
  --cs-font-size-body-lg: 1.125rem;   /* 18px */
  --cs-font-size-h3: 1.25rem;         /* 20px */
  --cs-font-size-h2: 1.5rem;          /* 24px */
  --cs-font-size-h1-auth: clamp(2rem, 7vw, 2.75rem); /* 32px to 44px */
  --cs-font-size-h1: clamp(2.375rem, 8vw, 3.5rem);   /* 38px to 56px */
  --cs-font-size-display: clamp(2.75rem, 6vw, 4rem); /* 44px to 64px */
  --cs-line-height-tight: 1.08;
  --cs-line-height-heading: 1.2;
  --cs-line-height-body: 1.6;
  --cs-line-height-control: 1.25;
  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;

  /* Spacing, 4px base */
  --cs-space-0: 0;
  --cs-space-1: 0.25rem;  /* 4px */
  --cs-space-2: 0.5rem;   /* 8px */
  --cs-space-3: 0.75rem;  /* 12px */
  --cs-space-4: 1rem;     /* 16px */
  --cs-space-5: 1.25rem;  /* 20px */
  --cs-space-6: 1.5rem;   /* 24px */
  --cs-space-8: 2rem;     /* 32px */
  --cs-space-10: 2.5rem;  /* 40px */
  --cs-space-12: 3rem;    /* 48px */
  --cs-space-16: 4rem;    /* 64px */
  --cs-space-20: 5rem;    /* 80px */
  --cs-space-24: 6rem;    /* 96px */

  /* Radius */
  --cs-radius-sm: 0.5rem;   /* 8px */
  --cs-radius-md: 0.75rem;  /* 12px */
  --cs-radius-lg: 0.875rem; /* 14px */
  --cs-radius-xl: 1rem;     /* 16px */
  --cs-radius-2xl: 1.25rem; /* 20px */
  --cs-radius-shell: 1.75rem; /* 28px */
  --cs-radius-pill: 999px;

  /* Size and layout */
  --cs-control-height: 3.25rem;       /* 52px */
  --cs-control-height-large: 3.5rem;  /* 56px */
  --cs-touch-target: 2.75rem;         /* 44px */
  --cs-mobile-column: 30rem;          /* 480px */
  --cs-auth-form: 36rem;              /* 576px */
  --cs-desktop-content: 47.5rem;      /* 760px */
  --cs-desktop-sidebar: 18.5rem;      /* 296px */
  --cs-desktop-gap: 3rem;             /* 48px */
  --cs-desktop-shell: 73.75rem;       /* 1180px */
  --cs-desktop-breakpoint: 56.25rem;  /* 900px */

  /* Effects */
  --cs-shadow-card: 0 16px 48px rgba(0, 0, 0, 0.24);
  --cs-shadow-raised: 0 20px 60px rgba(0, 0, 0, 0.32);
  --cs-shadow-focus: 0 0 0 4px var(--cs-color-focus-ring);
  --cs-hero-glow: radial-gradient(120% 55% at 50% -5%, rgba(1, 126, 255, 0.22), transparent 60%);

  /* Motion */
  --cs-duration-fast: 120ms;
  --cs-duration-base: 180ms;
  --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Batch 4 coaching-portal extensions */
:root {
  --cs-color-surface-soft: rgba(10, 42, 77, 0.56);
  --cs-color-surface-quiet: rgba(3, 16, 31, 0.38);
  --cs-color-chart-grid: rgba(204, 225, 246, 0.10);
  --cs-color-chart-fill: rgba(1, 126, 255, 0.16);
  --cs-color-ring-track: rgba(204, 225, 246, 0.12);
  --cs-color-progress-track: rgba(204, 225, 246, 0.12);
  --cs-chart-height: 10rem;
  --cs-progress-height: 0.5rem;
  --cs-ring-size: 5.5rem;
  --cs-reading-width: 42rem;
}