/**
 * Arc Design System CSS Variables
 *
 * Extracted from Rise CSS files for use in custom SCORM templates.
 * These variables provide consistent styling across all interactive elements.
 */

:root {
  /* ========================================
   * BASE CONFIGURATION
   * ======================================== */

  /* Font size base multiplier (default: 0.625 = 10px base on 16px root) */
  --arc-font-size-base: 0.625;
  --arc-internal-font-size: var(--arc-font-size-base, 0.625);

  /* Spacing and sizing base units */
  --arc-internal-space: calc(0.8rem * var(--arc-internal-font-size));
  --arc-internal-size: calc(0.8rem * var(--arc-internal-font-size));


  /* ========================================
   * COLOR SYSTEM
   * ======================================== */

  /* Base colors */
  --arc-color-mono-black: #000;
  --arc-color-mono-white: #fff;

  /* Blue palette (brand colors) */
  --arc-color-blue-050: #f0fbff;
  --arc-color-blue-100: #ddf4fd;
  --arc-color-blue-200: #99e4ff;
  --arc-color-blue-600: #0075cf;

  /* Neutral palette */
  --arc-color-neutral-100: #ededed;

  /* Alpha channels - Black */
  --arc-color-alpha-black-10: #0000001a;
  --arc-color-alpha-black-30: #0000004d;

  /* Alpha channels - White */
  --arc-color-alpha-white-70: #ffffffb3;

  /* Semantic color tokens - Border */
  --arc-color-border-standard: var(--arc-color-alpha-black-10);
  --arc-color-border-focus: var(--arc-color-blue-600);

  /* Semantic color tokens - Background */
  --arc-color-background-primary: var(--arc-color-mono-white);
  --arc-color-background-primary-hover: var(--arc-color-neutral-100);
  --arc-color-background-primary-selected: var(--arc-color-blue-100);
  --arc-color-background-inverse: var(--arc-color-mono-black);

  /* Overlay colors */
  --arc-color-overlay-light: var(--arc-color-alpha-white-70);


  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font families */
  --arc-internal-font-body: Inter, system-ui, sans-serif;
  --arc-font-family-body: var(--arc-internal-font-body);

  /* Font sizes */
  --arc-font-size-10: calc(1rem * var(--arc-internal-font-size));
  --arc-font-size-12: calc(1.2rem * var(--arc-internal-font-size));
  --arc-font-size-14: calc(1.4rem * var(--arc-internal-font-size));
  --arc-font-size-16: calc(1.6rem * var(--arc-internal-font-size));
  --arc-font-size-20: calc(2rem * var(--arc-internal-font-size));
  --arc-font-size-24: calc(2.4rem * var(--arc-internal-font-size));
  --arc-font-size-28: calc(2.8rem * var(--arc-internal-font-size));

  /* Semantic font sizes */
  --arc-font-size-body-xs: var(--arc-font-size-10);
  --arc-font-size-body-sm: var(--arc-font-size-12);

  /* Font weights */
  --arc-font-weight-400: 400;
  --arc-font-weight-600: 600;

  /* Line heights */
  --arc-line-height-standard: 1.4;
  --arc-line-height-body: var(--arc-line-height-standard);


  /* ========================================
   * SPACING SCALE
   * ======================================== */

  --arc-space-0: 0;
  --arc-space-0-5: calc(var(--arc-internal-space) * 0.5);
  --arc-space-0-75: calc(var(--arc-internal-space) * 0.75);
  --arc-space-1: calc(var(--arc-internal-space));
  --arc-space-1-5: calc(var(--arc-internal-space) * 1.5);
  --arc-space-2: calc(var(--arc-internal-space) * 2);
  --arc-space-2-5: calc(var(--arc-internal-space) * 2.5);
  --arc-space-3: calc(var(--arc-internal-space) * 3);
  --arc-space-4: calc(var(--arc-internal-space) * 4);
  --arc-space-5: calc(var(--arc-internal-space) * 5);
  --arc-space-6: calc(var(--arc-internal-space) * 6);
  --arc-space-7: calc(var(--arc-internal-space) * 7);


  /* ========================================
   * SIZE SCALE
   * ======================================== */

  --arc-size-1-75: calc(var(--arc-internal-size) * 1.75);
  --arc-size-2: calc(var(--arc-internal-size) * 2);
  --arc-size-3: calc(var(--arc-internal-size) * 3);
  --arc-size-3-25: calc(var(--arc-internal-size) * 3.25);
  --arc-size-4: calc(var(--arc-internal-size) * 4);
  --arc-size-5: calc(var(--arc-internal-size) * 5);


  /* ========================================
   * ALPHA / OPACITY
   * ======================================== */

  --arc-alpha-30: 30%;


  /* ========================================
   * BORDER RADIUS
   * ======================================== */

  --arc-border-radius-sm: 2px;
  --arc-border-radius-md: 4px;
  --arc-border-radius-lg: 8px;
  --arc-border-radius-circle: 50%;
  --arc-border-radius-pill: 100vh;


  /* ========================================
   * SHADOWS
   * ======================================== */

  --arc-shadow-light-lg: 0 4px 24px 0 #00000026;
}


/**
 * USAGE NOTES:
 *
 * Font Sizes:
 *   - Based on 10px scale (0.625 multiplier on 16px root)
 *   - --arc-font-size-12 = 12px
 *   - --arc-font-size-14 = 14px
 *   - --arc-font-size-16 = 16px (default body)
 *
 * Spacing:
 *   - Base unit: 8px (0.8rem * 0.625)
 *   - --arc-space-1 = 8px
 *   - --arc-space-2 = 16px
 *   - --arc-space-3 = 24px
 *
 * Colors:
 *   - Use semantic tokens (--arc-color-background-primary) over raw colors
 *   - Border focus uses brand blue (#0075cf)
 *   - Hover states use neutral-100 (#ededed)
 *
 * Border Radius:
 *   - sm: 2px (subtle)
 *   - md: 4px (standard buttons, inputs)
 *   - lg: 8px (cards, containers)
 *   - circle: 50% (avatars, icon buttons)
 *   - pill: 100vh (full rounded buttons)
 */