@import "tailwindcss";

@source "./default";
@source "./minimal";
@source "./shared";

/* ==========================================================================
   Design system tokens

   Shared defaults exposed as Tailwind theme variables. Tailwind v4 emits
   these on `:root` and also makes them addressable as utilities
   (`bg-(--media-color-primary)` etc.).

   Layered overrides target the skin's root via the `data-skin` attribute
   each skin component sets on its outer element:
     - `@theme` — universal defaults.
     - `[data-skin^="<skin>-"]` — skin-wide overrides shared across presets.
     - `[data-skin="<skin>-<preset>"]` — preset-specific overrides.

   Truly contextual values (motion-reduced, contrast-more, fullscreen, …)
   stay as utilities in the skin's `root` token.
   ========================================================================== */

@theme {
  /* Spring transition shared by error-dialog popups */
  --media-spring-transition: linear(
    0,
    0.034 1.5%,
    0.763 9.7%,
    1.066 13.9%,
    1.198 19.9%,
    1.184 21.8%,
    0.963 37.5%,
    0.997 50.9%,
    1
  );

  /* Border radius */
  --media-video-border-radius: var(--media-border-radius, 2rem);

  /* Controls */
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;

  /* Surface */
  --media-surface-background-color: oklch(1 0 0 / 0.1);
  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);

  /* Popup */
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;

  /* Tooltip */
  --media-tooltip-side-offset: 0.75rem;
  --media-tooltip-text-color: currentColor;
  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);

  /* Popover */
  --media-popover-side-offset: 0.5rem;

  /* Error dialog */
  --media-error-dialog-transition-duration: 350ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: var(--media-spring-transition);

  /* Caption track */
  --media-caption-track-y: -0.5rem;
  --media-caption-track-delay: 25ms;
  --media-caption-track-duration: var(--media-controls-transition-duration);
}

@layer skins {
  /* ========================================================================
     Default skin
     ======================================================================== */

  [data-skin="default-audio"] {
    --media-text-color: var(--media-color-primary, oklch(0 0 0));

    --media-surface-background-color: oklch(1 0 0 / 0.5);
    --media-surface-inner-border-color: oklch(1 0 0 / 0.1);
    --media-surface-outer-border-color: oklch(0 0 0 / 0.05);

    --media-popover-side-offset: 0.75rem;

    --media-error-dialog-transition-duration: 250ms;
    --media-error-dialog-transition-timing-function: ease-out;
  }

  /* ========================================================================
     Minimal skin
     ======================================================================== */

  [data-skin^="minimal-"] {
    --media-video-border-radius: var(--media-border-radius, 0.75rem);

    --media-tooltip-side-offset: 0.5rem;
    --media-tooltip-border-color: transparent;

    --media-popover-side-offset: 1.5rem;

    --media-controls-background-color: transparent;

    --media-error-dialog-transition-duration: 150ms;
    --media-error-dialog-transition-timing-function: ease-out;
  }

  [data-skin="minimal-audio"] {
    --media-controls-background-color: oklch(1 0 0);
    --media-controls-backdrop-filter: blur(16px) saturate(1.5);
    --media-controls-border-color: oklch(0 0 0 / 0.05);
    --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));

    --media-popover-side-offset: 0.75rem;
    --media-tooltip-border-color: oklch(0 0 0 / 0.05);

    --media-error-dialog-transition-duration: 250ms;
  }
}