@import "spacing.css";
@import "typography.css";

html {
  color-scheme: only dark;
  /* Background colors */
  --AP-BACKGROUND-BRAND: var(--ap-background-brand, #000);
  --AP-BRAND-CONTRAST: var(--ap-brand-contrast, #fff);
  --AP-BACKGROUND-BODY: var(--ap-background-body, #0f0f11);
  --AP-BACKGROUND-CARD: var(--ap-background-card, #1f1e21);
  --AP-BACKGROUND-CARD-HEAD: var(--ap-background-card-head, #2c2c2f);
  --AP-BACKGROUND-INTERACTIVE-2: var(--ap-background-interactive-2, #2c2c30);
  --AP-BACKGROUND-INTERACTIVE-1: var(--ap-background-interactive-1, #38383f);
  --AP-BACKGROUND-INTERACTIVE-0: var(--ap-background-interactive-0, #43424c);
  --AP-BACKGROUND-INPUT-13: var(
    --ap-background-input-13,
    rgba(255 255 255 / 13%)
  );
  --AP-BACKGROUND-INPUT-9: var(--ap-background-input-9, rgba(255 255 255 / 9%));
  --AP-BACKGROUND-INPUT-7: var(--ap-background-input-7, rgba(255 255 255 / 7%));
  --AP-BACKGROUND-INPUT-4: var(--ap-background-input-4, rgba(255 255 255 / 4%));

  /* Accent colors */
  --AP-PRIMARY-ACTIVE: var(--ap-primary-active, #2e4678);
  --AP-PRIMARY: var(--ap-primary, #4b6db4);
  --AP-PRIMARY-DIMMED: var(--ap-primary-dimmed, #4b6db499);
  --AP-PRIMARY-EXTRA-DIMMED: var(--ap-primary-extra-dimmed, #4b6db433);
  --AP-PRIMARY-LINK: var(--ap-primary-link, #7592ca);
  --AP-PRIMARY-HOVER: var(--ap-primary-hover, #86a3da);
  --AP-PRIMARY-CONTRAST: var(--ap-primary-contrast, #fff);
  --AP-ERROR-ACTIVE: var(--ap-error-active, #8f1d1d);
  --AP-ERROR: var(--ap-error, #c83635);
  --AP-ERROR-DIMMED: var(--ap-error-dimmed, #c8363599);
  --AP-ERROR-EXTRA-DIMMED: var(--ap-error-extra-dimmed, #c8363533);
  --AP-ERROR-TEXT: var(--ap-error-text, #dd5958);
  --AP-ERROR-HOVER: var(--ap-error-hover, #dd5958);
  --AP-ERROR-CONTRAST: var(--ap-error-contrast, #fff);
  --AP-SUCCESS: var(--ap-success, #4ab85d);
  --AP-SUCCESS-CONTRAST: var(--ap-success-contrast, #000);
  --AP-WARNING: var(--ap-warning, #ffd635);
  --AP-WARNING-DIMMED: var(--ap-warning-dimmed, #ffd63599);
  --AP-WARNING-EXTRA-DIMMED: var(--ap-warning-extra-dimmed, #ffd63533);
  --AP-WARNING-CONTRAST: var(--ap-warning-contrast, #000);

  /* Foreground colors */
  --AP-FOREGROUND-2: var(--ap-foreground-2, #9493a0);
  --AP-FOREGROUND-1: var(--ap-foreground-1, #d8d8d8);
  --AP-FOREGROUND-0: var(--ap-foreground-0, #fff);

  /* Alpha colors  */
  --AP-ALPHA-15: var(--ap-alpha-15, rgb(255 255 255 / 15%));
  --AP-ALPHA-25: var(--ap-alpha-25, rgb(255 255 255 / 25%));
  --AP-ALPHA-50: var(--ap-alpha-50, rgb(255 255 255 / 50%));
  --AP-ALPHA-75: var(--ap-alpha-75, rgb(255 255 255 / 75%));
  --AP-ALPHA-85: var(--ap-alpha-85, rgb(255 255 255 / 85%));

  /* Component colors */
  --AP-BACKGROUND-COMPONENT-4: var(
    --ap-background-component-4,
    rgba(255 255 255 / 4%)
  );
  --AP-BACKGROUND-COMPONENT-7: var(
    --ap-background-component-7,
    rgba(255 255 255 / 7%)
  );
  --AP-BACKGROUND-COMPONENT-10: var(
    --ap-background-component-10,
    rgba(255 255 255 / 10%)
  );
  --AP-BACKGROUND-COMPONENT-17: var(
    --ap-background-component-17,
    rgba(255 255 255 / 17%)
  );
  --AP-BACKGROUND-COMPONENT-ON-PRIMARY-7: var(
    --ap-background-component-on-primary-7,
    rgba(255 255 255 / 7%)
  );
  --AP-BACKGROUND-COMPONENT-ON-PRIMARY-10: var(
    --ap-background-component-on-primary-10,
    rgba(255 255 255 / 10%)
  );
  --AP-BACKGROUND-COMPONENT-ON-PRIMARY-17: var(
    --ap-background-component-on-primary-17,
    rgba(255 255 255 / 17%)
  );
  --AP-BACKGROUND-COMPONENT-ON-PRIMARY-25: var(
    --ap-background-component-on-primary-25,
    rgba(255 255 255 / 25%)
  );
  --AP-BACKGROUND-OVERLAY: var(--ap-background-overlay, rgba(15 15 17 / 75%));

  /* Utility */
  --AP-UTILITY-FOCUSED-BORDER: var(
    --ap-utility-focused-border,
    rgba(255 255 255 / 50%)
  );
  --AP-UTILITY-FOCUSED-BORDER-ON-PRIMARY: var(
    --ap-utility-focused-border-on-primary,
    rgba(255 255 255 / 50%)
  );

  /* Marker colors (excluding primary, error and warning) */
  --AP-ORANGE: var(--ap-orange, #e88017);
  --AP-PURPLE: var(--ap-purple, #9140bf);
  --AP-MAGENTA: var(--ap-magenta, #cc33bd);
  --AP-PINK: var(--ap-pink, #f70848);
  --AP-TURQUOISE: var(--ap-turquoise, #3cc);
  --AP-AZURE: var(--ap-azure, #2d98d2);
}