/*
 * variables.css
 * Global design tokens for the Magic Game template.
 *
 * This file must define every CSS custom property used by the visual layer.
 */

:root {
  /* Typography */
  --font-main: "Cormorant Garamond", Georgia, serif;
  --font-size-xs: clamp(0.78rem, 2.9vw, 0.9rem);
  --font-size-sm: clamp(0.9rem, 3.4vw, 1.05rem);
  --font-size-md: clamp(1.05rem, 4.2vw, 1.28rem);
  --font-size-lg: clamp(1.28rem, 5.4vw, 1.72rem);
  --font-size-xl: clamp(1.65rem, 7vw, 2.45rem);
  --font-size-xxl: clamp(2.05rem, 9vw, 3.65rem);
  --line-height-base: 1.35;
  --line-height-title: 1.05;

  /* Core colors */
  --color-bg-deep: #050202;
  --color-bg-dark: #120706;
  --color-bg-rust: #4f120b;
  --color-bg-red: #74190f;
  --color-text: #fff4df;
  --color-text-soft: rgba(255, 244, 223, 0.86);
  --color-text-muted: rgba(255, 244, 223, 0.68);
  --color-gold: #ffd18a;
  --color-gold-soft: rgba(255, 209, 138, 0.72);
  --color-error: #ffb3a4;
  --color-success: #c9ffc4;
  --color-black-soft: rgba(0, 0, 0, 0.42);

  /* Layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --screen-padding-x: clamp(12px, 4vw, 28px);
  --screen-padding-y: clamp(12px, 3dvh, 30px);
  --content-max-width: 760px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-2xl: 44px;
  --radius-round: 999px;

  /* Borders */
  --border-soft: 1px solid rgba(255, 218, 155, 0.28);
  --border-strong: 1px solid rgba(255, 218, 155, 0.46);

  /* Shadows */
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 22px 68px rgba(0, 0, 0, 0.52);
  --shadow-glow: 0 0 42px rgba(255, 154, 69, 0.18);

  /* Effects */
  --backdrop-blur: 14px;
  --room-blur: 10px;
  --room-overlay-opacity: 0.42;

  /* Z-index scale */
  --z-background: 0;
  --z-content: 10;
  --z-restart: 70;
  --z-modal: 100;
  --z-guard: 150;
  --z-cursor: 220;
  --z-debug: 300;
  --z-loader: 400;

  /* Animation */
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 460ms;
  --duration-room-fade: 1000ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce-soft: cubic-bezier(0.2, 1.18, 0.38, 1);

  /* Text box defaults. Can be overridden by config/texts.php per box. */
  --box-background: #120807;
  --box-opacity: 0.74;
  --box-text-color: var(--color-text);
  --box-border-width: 1px;
  --box-border-style: solid;
  --box-border-color: rgba(255, 218, 155, 0.38);
  --box-border-radius: var(--radius-lg);
  --box-padding: clamp(16px, 5vw, 26px);
  --box-text-align: center;
  --box-overflow-y: visible;

  /* Buttons */
  --button-min-height: clamp(46px, 12vw, 58px);
  --button-bg: linear-gradient(135deg, #ffe0a6 0%, #ffb35f 42%, #b95828 100%);
  --button-text: #250b06;
  --button-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 26px rgba(255, 154, 69, 0.18);
  --button-secondary-bg: rgba(255, 244, 226, 0.08);
  --button-secondary-text: var(--color-text);
  --button-secondary-border: 1px solid rgba(255, 218, 155, 0.34);

  /* Carousel */
  --carousel-image-max-height: min(42dvh, 420px);
  --carousel-arrow-size: clamp(46px, 13vw, 62px);

  /* Drag/drop */
  --drag-item-size: clamp(54px, 18vw, 86px);
  --drag-slot-size: clamp(58px, 19vw, 92px);

  /* Ghost challenge */
  --ghost-zone-height: min(50dvh, 470px);

  /* Cursor magic */
  --sparkle-size: clamp(5px, 1.4vw, 8px);
  --sparkle-glow-size: clamp(34px, 9vw, 58px);
}

@media (max-width: 360px) {
  :root {
    --screen-padding-x: 10px;
    --space-4: 13px;
    --space-5: 18px;
    --drag-item-size: clamp(46px, 17vw, 66px);
    --drag-slot-size: clamp(50px, 18vw, 70px);
    --ghost-zone-height: 48dvh;
  }
}

@media (max-height: 640px) and (orientation: portrait) {
  :root {
    --screen-padding-y: 9px;
    --space-4: 10px;
    --space-5: 14px;
    --button-min-height: 42px;
    --carousel-image-max-height: min(34dvh, 300px);
    --drag-item-size: clamp(44px, 15vw, 64px);
    --drag-slot-size: clamp(48px, 16vw, 68px);
    --ghost-zone-height: 46dvh;
  }
}

@media (min-width: 700px) {
  :root {
    --screen-padding-x: clamp(24px, 6vw, 64px);
    --content-max-width: 920px;
    --drag-item-size: clamp(72px, 10vw, 104px);
    --drag-slot-size: clamp(76px, 11vw, 112px);
    --ghost-zone-height: min(52dvh, 540px);
  }
}