/* assets/css/base.css
 *
 *   --color-pink:   #FF6DAE;
 *   --color-orange: #FF9A63;
 *   --color-gold:   #FFD34A;
 *   --color-green:  #7CF27C;
 *   --color-cyan:   #6EE7FF;
 *   --color-violet: #B084FF;
 * 
 *  
 *  
 */

/* ------------------------------
   1. Global Reset / Normalize
   ------------------------------ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

/* Basic media + form normalization */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ------------------------------
   2. Root Tokens
   ------------------------------ */

:root {
  /* Existing light theme tokens (kept exactly) */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.55);
  --solid-bg: #fff;
  --text-primary: #0e0e10;
  --text-secondary: #333;
  --shadow-sm: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.28);

  /* Extra spacing / radius tokens that other CSS can use */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  
  /* raw palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #ACACAC;
  
  --color-pink:   #FF6DAE;
  --color-orange: #FF9A63;
  --color-gold:   #FFD34A;
  --color-green:  #7CF27C;
  --color-cyan:   #6EE7FF;
  --color-violet: #B084FF;

  /* semantic helpers */
  --color-accent:       var(--color-gray);
  --color-accent-soft:  rgba(172, 172, 172, 0.12);

  /* chart / data series */
  --color-series-1: var(--color-pink);
  --color-series-2: var(--color-orange);
  --color-series-3: var(--color-gold);
  --color-series-4: var(--color-green);
  --color-series-5: var(--color-cyan);
  --color-series-6: var(--color-violet);

  /* NEW: surface + text semantics (thin wrapper around the above) */
  --surface-default: var(--solid-bg);
  --surface-glass:   var(--glass-bg);
  --surface-border:  rgba(0, 0, 0, 0.08);

  --text-muted:   rgba(0, 0, 0, 0.65);
  --text-subtle:  rgba(0, 0, 0, 0.5);

  /* Optional status helpers (handy later for tasks, priority, etc.) */
  --status-ok:     var(--color-green);
  --status-warn:   var(--color-gold);
  --status-danger: var(--color-pink);
}

/* ------------------------------
   3. Body Base Styles
   ------------------------------ */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background: #fffefa;
  color: var(--text-primary);

  /* fallback */
  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
}

/* Orientation classes are added by main.js */
body.orientation-portrait {
  /* hooks available if we need orientation-specific tweaks later */
}

body.orientation-landscape {
  /* hooks available if we need orientation-specific tweaks later */
}

/* ------------------------------
   4. CryptiCrew Starburst Backdrop
   ------------------------------ */

/* Animated conic starburst (unchanged visually) */
.burst {
  position: fixed;
  inset: -55vmax;
  z-index: -2;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(255, 255, 255, .6), transparent 45%),
    radial-gradient(60% 60% at 80% 10%, rgba(255, 255, 255, .4), transparent 55%),
    conic-gradient(from 0turn, #ff6dae, #ffd34a, #7cf27c, #6ee7ff, #b084ff, #ff6dae);
  filter: saturate(1.2) contrast(1.05);
  animation: burst-spin 28s linear infinite;
  pointer-events: none;
}

@keyframes burst-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Conic rings overlay (unchanged) */
.burst__rings::before,
.burst__rings::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, .16) 0 6deg,
    transparent 6deg 12deg
  );
  mask: radial-gradient(circle at center, #000 40%, transparent 70%);
  animation: burst-pulse 6s ease-in-out infinite alternate;
}

@keyframes burst-pulse {
  to {
    transform: scale(1.06);
  }
}

/* Sparkles overlay (unchanged) */
.burst__sparkles::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, .9) 0 2px,
    transparent 3px
  );
  background-size: 12px 12px;
  mix-blend-mode: overlay;
  opacity: .35;
  animation: burst-twinkle 14s linear infinite;
}

@keyframes burst-twinkle {
  to {
    background-position: 800px 400px;
  }
}

/* ------------------------------
   5. Stationary Runes Overlay
   ------------------------------ */

.runes-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><pattern id="runes" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M20 40 L30 20 M30 20 L40 40 M25 30 L35 30" stroke="%23000" stroke-width="2" opacity="0.08" fill="none"/><circle cx="160" cy="50" r="8" stroke="%23000" stroke-width="2" opacity="0.08" fill="none"/><path d="M80 150 L90 170 L100 150 M85 160 L95 160" stroke="%23000" stroke-width="2" opacity="0.08" fill="none"/><rect x="140" y="140" width="20" height="20" stroke="%23000" stroke-width="2" opacity="0.08" fill="none" transform="rotate(45 150 150)"/><path d="M50 100 Q60 90 70 100 T90 100" stroke="%23000" stroke-width="2" opacity="0.08" fill="none"/><polygon points="170,180 160,190 170,200 180,190" stroke="%23000" stroke-width="2" opacity="0.08" fill="none"/></pattern></defs><rect width="200" height="200" fill="url(%23runes)"/></svg>');
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: multiply;
  opacity: .25;
  pointer-events: none;
}