:root{
  --prtk-container-base: 1240px;
  --prtk-container-desktop: 1480px;
  --prtk-container: var(--prtk-container-base);
}

@media (min-width: 1280px){
  :root{
    --prtk-container: var(--prtk-container-desktop);
  }
}

.prititak-app{
  /* =========================
   * Prititak Design Tokens
   * Scope: ONLY inside .prititak-app
   * ========================= */

  /* Brand palette (required) */
  /* Brand palette tuned to the podcast/logo system: cyan glow + deep petroleum + restrained signal red */
  --ptk-primary: #1097A8;
  --ptk-primary-soft: #E8FAFD;
  --ptk-accent: #1097A8;
  --ptk-accent-soft: #EEF9FC;
  --ptk-bg: #F5FAFC;
  --ptk-surface: #FFFFFF;
  --ptk-surface-alt: #F2F7FA;
  --ptk-text: #15243A;
  --ptk-text-muted: #607089;
  --ptk-border: rgba(14, 120, 141, 0.14);
  --ptk-success: #0C8597;
  --ptk-warning: #E64B62;
  --ptk-danger: #D63B58;
  --ptk-info: #0E7288;
  --ptk-signal: #FF5366;
  --ptk-signal-soft: #FFF1F4;

  /* Back-compat aliases */
  --ptk-brand: var(--ptk-primary);
  /* Fallback (Safari iOS < 16.4 may not support `color-mix()`): brand hover. */
  --ptk-brand-hover: #0B6F7D;
  --ptk-brand-soft: var(--ptk-primary-soft);
  --ptk-surface-2: var(--ptk-surface-alt);
  --ptk-warn: var(--ptk-warning);
  --ptk-muted: var(--ptk-text-muted);
  --ptk-accent-hover: var(--ptk-brand-hover);

  /* Derived tokens */
  /* Fallbacks for derived tokens (approximate). */
  --ptk-border-strong: #BDD7DE;
  --ptk-success-soft: #E6F7FA;
  --ptk-warn-soft: #FFF0F3;
  --ptk-danger-soft: #FCE8EE;
  --ptk-muted-2: #40536B;

  /* Typography */
  --ptk-font: var(--prtk-font, "Sora", "Manrope", "Fira Sans", sans-serif);
  --ptk-font-display: "Sora", "Manrope", "Fira Sans", sans-serif;
  --ptk-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ptk-fs-12: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --ptk-fs-14: clamp(0.875rem, 0.84rem + 0.12vw, 0.95rem);
  --ptk-fs-16: clamp(1rem, 0.98rem + 0.14vw, 1.0625rem);
  --ptk-fs-18: clamp(1.0625rem, 1.02rem + 0.2vw, 1.2rem);
  --ptk-fs-22: clamp(1.25rem, 1.16rem + 0.5vw, 1.6rem);
  --ptk-fs-28: clamp(1.6rem, 1.35rem + 1vw, 2.2rem);
  --ptk-lh: 1.55;
  --ptk-lh-tight: 1.2;
  --ptk-fw-500: 500;
  --ptk-fw-600: 600;
  --ptk-fw-700: 700;
  --ptk-fw-800: 800;
  --ptk-fw-900: 900;
  --ptk-ls-tight: 0;
  --ptk-ls-normal: 0;

  /* Spacing */
  --ptk-1: 4px;
  --ptk-2: 8px;
  --ptk-3: 12px;
  --ptk-4: 16px;
  --ptk-5: 20px;
  --ptk-6: 24px;
  --ptk-8: 32px;
  --ptk-10: 40px;
  --ptk-12: 48px;

  /* Radii & shadows */
  --ptk-r-10: 10px;
  --ptk-r-12: 12px;
  --ptk-r-14: 14px;
  --ptk-r-16: 16px;
  --ptk-r-20: 20px;
  --ptk-r-24: 24px;
  --ptk-shadow-sm: 0 1px 0 rgba(11, 24, 39, 0.04), 0 8px 18px rgba(11, 24, 39, 0.06);
  --ptk-shadow-md: 0 1px 0 rgba(11, 24, 39, 0.05), 0 18px 38px rgba(11, 24, 39, 0.11);
  --ptk-shadow-lg: 0 1px 0 rgba(11, 24, 39, 0.06), 0 28px 68px rgba(11, 24, 39, 0.16);

  /* Focus + motion */
  /* Fallbacks use RGBA (safe on older Safari). */
  --ptk-focus: rgba(16, 151, 168, 0.30);
  --ptk-focus-strong: rgba(16, 151, 168, 0.52);
  --ptk-ease: cubic-bezier(.2,.9,.2,1);
  --ptk-dur-1: 120ms;
  --ptk-dur-2: 220ms;
  --ptk-btn-h: 44px;
  --ptk-container: var(--prtk-container, 1240px);

  font-family: var(--ptk-font);
  font-size: var(--ptk-fs-16);
  line-height: var(--ptk-lh);
  color: var(--ptk-text);
}

/* Use high-fidelity derived tokens only when `color-mix()` is supported. */
@supports (color: color-mix(in oklab, #000 50%, #fff)) {
  .prititak-app{
    --ptk-brand-hover: color-mix(in oklab, var(--ptk-primary) 78%, #072f38);
    --ptk-border: color-mix(in oklab, var(--ptk-primary) 16%, #d7e7ec);
    --ptk-border-strong: color-mix(in oklab, var(--ptk-primary) 32%, #c0d8df);

    --ptk-shadow-sm: 0 1px 0 rgba(11, 24, 39, 0.04), 0 8px 18px color-mix(in oklab, var(--ptk-primary) 7%, rgba(11, 24, 39, 0.06));
    --ptk-shadow-md: 0 1px 0 rgba(11, 24, 39, 0.05), 0 18px 38px color-mix(in oklab, var(--ptk-primary) 9%, rgba(11, 24, 39, 0.11));
    --ptk-shadow-lg: 0 1px 0 rgba(11, 24, 39, 0.06), 0 28px 68px color-mix(in oklab, var(--ptk-primary) 12%, rgba(11, 24, 39, 0.16));

    --ptk-success-soft: color-mix(in oklab, var(--ptk-success) 12%, #fff);
    --ptk-warn-soft: color-mix(in oklab, var(--ptk-warning) 12%, #fff);
    --ptk-danger-soft: color-mix(in oklab, var(--ptk-danger) 12%, #fff);
    --ptk-focus: color-mix(in oklab, var(--ptk-primary) 30%, transparent);
    --ptk-focus-strong: color-mix(in oklab, var(--ptk-primary) 55%, transparent);
    --ptk-muted-2: color-mix(in oklab, var(--ptk-text-muted) 70%, var(--ptk-text));
  }
}

.prititak-app,
.prititak-app * ,
.prititak-app *::before,
.prititak-app *::after{
  box-sizing: border-box;
}

.prititak-app :where(a){
  color: inherit;
}

.prititak-app :where(:focus-visible){
  outline: 3px solid var(--ptk-focus-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .prititak-app{
    --ptk-dur-1: 0ms;
    --ptk-dur-2: 0ms;
  }
  .prititak-app *{
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}