/* ==========================
   Assets/Modules/base.css
   --------------------------------
   Golden Minimal — Base stylesheet (Updated)
   --------------------------------
   © 2025 Vaastu Vedak™. All rights reserved.
   Author: Vaastu Vedak Design System
   Version: 1.0.1
   Built: 2025-10-15
   Last edited by: Mayank Chawdhari (BOSS294)
   License: MIT (see LICENSE file in root)

   WHAT THIS FILE IS
   -----------------
   Project-wide base CSS for the *Golden Minimal* theme used by
   the Vaastu Vedak theme selector. Maintains the original structure
   while tightening up micro-interactions, link behaviour, and CTAs.

   HIGHLIGHTED UPDATES (1.0.1)
   ---------------------------
   • Added concise documentation entries and changelog at top.
   • Global rule: <a> tags have no text-decoration by default (focus styles preserved).
   • Added new micro-animation helpers and refined existing ones.
   • Redesigned CTA-1 (.btn--primary) to be less flashy and more refined.
   • Enhanced CTA-2 (.btn--secondary) with a deliberate 3D hover effect.
   • Improved accessible focus styles for interactive elements and links.
   • Kept original utility classes and layout rules; minimal breaking changes.

   USAGE NOTES
   ----------
   • Keep overriding visual variants limited to :root variables.
   • Respect prefers-reduced-motion — animations are softened/disabled.
   • Run a contrast check when changing color vars to meet WCAG levels.

   CHANGELOG
   ---------
   1.0.1 — 2025-10-15 — Small UX polish: links, micro-animations, CTA refinements.
   1.0.0 — Initial release (see previous commit)
*/

/* ==========================
   Root variables (Golden Minimal)
   60% primary, 30% secondary, 10% accent
   ========================== */
:root{
  /* Theme metadata */
  --theme-name: "Golden Minimal";
  --theme-version: 1.0.1;

  /* Colors */
  --primary: #ffb700;         /* dominant (60%) - golden */
  --secondary: #0f1720;       /* support (30%) - dark charcoal */
  --accent: #ffecb3;          /* accent (10%) - pale haldi */

  /* Background and surfaces */
  --bg-0: #0f1720; /* page background */
  --surface-0: rgba(255,255,255,0.02);                    /* subtle card surface */
  --glass-0: rgba(255,255,255,0.03);

  /* Typographic */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-serif: Georgia, 'Times New Roman', serif;
  --text-main: #ffffff;
  --muted: rgba(255,255,255,0.68);
  --muted-2: rgba(255,255,255,0.48);

  /* Spacing & geometry */
  --space-xs: 6px; --space-sm: 12px; --space-md: 18px; --space-lg: 28px; --space-xl: 40px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;

  /* Buttons */
  --btn-radius: 10px;
  --btn-padding-y: 12px;
  --btn-padding-x: 18px;

  /* Elevation */
  --shadow-1: 0 6px 18px rgba(2,2,2,0.6);
  --shadow-2: 0 18px 44px rgba(2,2,2,0.65);
  --shadow-subtle: 0 4px 12px rgba(2,2,2,0.45);

  /* Motion */
  --motion-fast: 180ms; --motion-medium: 360ms; --motion-slow: 680ms;

  /* Performance hints */
  --will-change-default: transform, opacity;

  /* Micro interaction tuning */
  --micro-scale: 1.02;
  --micro-ease: cubic-bezier(.2,.9,.3,1);

  /* Accessibility */
  --focus-ring: rgba(255,214,105,0.16);
}

/* Page baseline */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  background:var(--bg-0);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}

/* Make all anchor tags visually clean (no underline). Keep semantic color and focus for accessibility */
a, a:link, a:visited { text-decoration: none; color: inherit; }
a:focus { outline: 3px solid var(--focus-ring); outline-offset: 3px }

/* Containers */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}
.center{display:flex;align-items:center;justify-content:center}
.column{display:flex;flex-direction:column}
.row{display:flex;align-items:center}

/* Accessible visually-hidden helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================
   Buttons / CTAs
   =================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border-radius:var(--btn-radius);border:0;cursor:pointer;font-weight:700;letter-spacing:0.3px;
  transition:transform var(--motion-fast) var(--micro-ease), box-shadow var(--motion-fast), filter var(--motion-fast);
  will-change:var(--will-change-default);
  -webkit-appearance:none;
  appearance:none;
  user-select:none;
}

/* Primary CTA (refined, less glossy, clearer affordance)
   - reduced heavy shadow, stronger contrast text, subtle shimmer on hover
*/
.btn--primary{
  background: var(--primary);
  color: #0b0b0b;
  box-shadow: var(--shadow-subtle);
  border: 1px solid color-mix(in srgb, var(--primary) 72%, #000 28%);
  position:relative;
  overflow:hidden;
}

/* Keep pseudo-element neutral so no gradient-based effect is used */
.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0);
  opacity:0;
  transition:opacity var(--motion-medium) var(--micro-ease);
}
.btn--primary:hover::after{ opacity:0 }

/* primary hover: restrained lift (not too theatrical) */
.btn--primary:hover{ transform: translateY(-4px) scale(calc(var(--micro-scale) - 0.005)); box-shadow: 0 12px 30px rgba(2,2,2,0.55) }
.btn--primary:active{ transform: translateY(-1px) scale(0.995); filter:brightness(0.96) }

/* Secondary CTA (low-emphasis) kept but with an improved 3D hover effect per request)
   - subtle base, stronger 3D lift on hover with perspective
*/
.btn--secondary{
  background: transparent; color:var(--text-main);
  border: 1px solid rgba(255,255,255,0.06); box-shadow:none; transform-style:preserve-3d; perspective:900px;
}

/* 3D hover: rotate and lift with lighting change */
.btn--secondary:hover{
  transform: translateY(-10px) rotateX(6deg) translateZ(24px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45));
}
.btn--secondary:active{ transform: translateY(-4px) rotateX(3deg) translateZ(8px); filter:brightness(0.98) }

/* Icon-only button small */
.btn--icon{padding:8px;border-radius:999px;width:44px;height:44px;display:inline-grid;place-items:center}

/* Focus visible for keyboard users (consistent across CTA types) */
.btn:focus{outline:3px solid var(--focus-ring);outline-offset:4px}

/* Disabled */
.btn[disabled]{opacity:0.5;pointer-events:none}

/* ===================
   Card / Panel / Floating widgets
   =================== */
.card, .panel{
  background: linear-gradient(180deg, var(--surface-0), rgba(255,255,255,0.01));
  border-radius: var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-1);
}

.floating-card{
  border-radius:var(--radius-md); padding:16px; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: var(--shadow-2); transition: transform var(--motion-medium) ease, box-shadow var(--motion-medium);
  transform-style: preserve-3d; will-change: transform;
}
.floating-card:hover{transform: translateY(-10px) rotateX(6deg) translateZ(30px)}

/* Badge */
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;font-size:13px;color:#111;background:var(--accent);
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
}

/* Thumbnail / preview */
.thumb{
  border-radius:12px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  cursor:pointer;box-shadow:var(--shadow-1);transition:transform var(--motion-fast), box-shadow var(--motion-fast);
}
.thumb:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}

/* Theme toggle floating control */
.theme-toggle{
  position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;box-shadow:var(--shadow-2);
}
.theme-toggle .dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.theme-toggle:hover{transform:translateY(-6px)}

/* ===================
   Micro animations & helpers (NEW + refined)
   =================== */
/* gentle pulse — use sparingly (badges, status) */
.pulse{animation:pulse var(--motion-slow) var(--micro-ease) infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* floaty for decorative elements */
.floaty{animation:floaty 4s var(--micro-ease) infinite}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* slight spin used for small icons */
.spark{display:inline-block;transform-origin:center;animation:spin-slight 3.2s linear infinite}
@keyframes spin-slight{0%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(10deg) translateY(-2px)}100%{transform:rotate(0deg) translateY(0)}}

/* subtle entrance fade (keeps perceived perf fast) */
.fade-in{animation:fadeIn var(--motion-medium) var(--micro-ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* micro-press — quick tactile feedback for dense UIs */
.micro-press:active{transform:scale(0.985);transition:transform 120ms var(--micro-ease)}

/* ripple-ish focus hint for larger actionable surfaces (non-blocking) */
.ripple-hint{position:relative;overflow:hidden}
.ripple-hint::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.06);transform:translate(-50%,-50%);opacity:0;transition:width 420ms var(--micro-ease),height 420ms var(--micro-ease),opacity 320ms}
.ripple-hint:focus::after{width:220%;height:220%;opacity:1}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  :root{ --motion-fast: 0ms; --motion-medium: 0ms; --motion-slow: 0ms }
  .btn, .floating-card, .thumb, .pulse, .floaty, .spark, .fade-in, .ripple-hint{animation:none;transition:none}
}

/* ===================
   Typography utilities
   =================== */
h1,h2,h3,h4{margin:0 0 12px}
h1{font-size:2.6rem;line-height:1.02}
h2{font-size:1.8rem}
.p{margin:0 0 16px}
.lead{font-size:1.1rem;color:var(--muted)}
.small{font-size:0.88rem;color:var(--muted-2)}

/* ===================
   Accessibility & forms
   =================== */
input,textarea,select{font:inherit;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text-main)}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(255,214,105,0.12);outline-offset:3px}

/* ===================
   Small responsive helpers
   =================== */
@media (max-width:980px){
  .container{padding:0 var(--space-md)}
  h1{font-size:1.8rem}
}

/* ===================
   Theme developer helpers
   =================== */
/* Quick preview box showing the 60-30-10 composition */
.palette-preview{display:flex;gap:6px}
.palette-preview > div{flex:1;padding:8px;border-radius:6px;color:var(--text-main);font-weight:700;text-align:center}
.palette-prim{background:var(--primary)}
.palette-sec{background:var(--secondary)}
.palette-acc{background:var(--accent)}

/* Small helpers to opt-in to micro interactions */
.btn--primary.micro, .btn--secondary.micro, .thumb.micro{transition: transform var(--motion-fast) var(--micro-ease), box-shadow var(--motion-fast)}

/* End of base.css */