/* ============================================================================
   CTS design tokens — GENERATED from cts_design_system_golden_copy.json
   (version 2026-07-22). Do not hand-edit values here; edit the
   golden copy in the app repo and regenerate. This file is the single brand
   seam for learn.cr8thespace.com — components read tokens, never hex.
   ============================================================================ */
:root {
  /* color_tokens */
  --cts-white: #F7F7F7;
  --cts-gray: #CCCCCC;
  --cts-black: #0A0A0A;
  --cts-indigo: #0D0929;
  --cts-teal: #005C5B;
  --cts-orange: #E86E27;
  --cts-red: #FF4D4F;
  --cts-medium-gray: #3A3A3A;
  --cts-dark-gray: #1E1E1E;
  --cts-teal-bright: #4ECAAC;

  /* brand_theme surfaces — the smoked-glass card system */
  --cts-surface: #14122B;
  --cts-surface-2: #1A1833;
  --cts-border: rgba(255,255,255,0.10);

  /* elemental identity */
  --cts-earth: #5FAE83;
  --cts-water: #46C4CE;
  --cts-air: #74B4EA;
  --cts-fire: #EE8A52;
  --cts-ether: #8A82DE;
  --cts-ether-accent: #B388FF;
  /* Every artifact declares ONE element (brand_artifact_canon). The course
     platform default is set per course; Drop The Act proposes Fire —
     activation, transformation, milestones — pending founder sign-off. */
  --cts-element: var(--cts-fire);

  /* typography */
  --cts-font-body: 'Lato', system-ui, sans-serif;
  --cts-font-display: 'Rubik', system-ui, sans-serif;
  --cts-size-page-title: 22px;   /* Rubik 700 */
  --cts-size-subheading: 20px;   /* Rubik 500 */
  --cts-size-body: 16px;         /* Lato 400 */
  --cts-size-card-title: 16px;   /* Lato 700 */
  --cts-size-card-body: 14px;    /* Lato 400 */

  /* radius */
  --cts-radius-input: 5px;
  --cts-radius-search: 5px;
  --cts-radius-notification: 7px;
  --cts-radius-tab: 20px;
  --cts-radius-modal: 10px;

  /* motion */
  --cts-motion: 300ms ease-out;
}

/* atmosphere_v7 — THE page background. background-attachment stays scroll:
   Chrome drops fixed-attachment gradients when any descendant uses
   backdrop-filter (canon corrected 2026-07-23). */
.cts-atmosphere {
  background: #0D0929 radial-gradient(ellipse 90% 60% at 50% 30%, #143A3E 0%, #0D0929 70%);
  background-attachment: scroll;
}

/* CTSCard — the default smoked-glass container */
.cts-card {
  background: var(--cts-surface);
  border: 1px solid var(--cts-border);
  border-radius: var(--cts-radius-modal);
}