/* ==========================================================================
   Assets/Modules/base.css — FINAL (v2.0.0)
   Rukhmani Graphics — "Pure White" theme (production-ready)
   Version: 2.0.0
   Author / Developer: Mayank Chawdhari (BOSS294)
   Trademark: Rukhmani Graphics ® — All design tokens and assets are provided
              for use in Rukhmani Graphics projects. If redistributed,
              please credit Rukhmani Graphics ® or the author where appropriate.
   --------------------------------------------------------------------------
   WHAT THIS FILE INCLUDES (summary)
   - Canonical design tokens (CSS variables) tuned for a premium "Pure White"
     theme with a distinct accent color and a dedicated dark-button system.
   - Robust, accessible button system:
       .btn-solid     -> primary (accent)
       .btn-outline   -> secondary
       .btn-dotted    -> micro / ghost
       .btn-dark      -> dark / reverse (black solid)
       .btn-dark-outline -> dark outline
     All with size variants: .btn--sm, .btn--lg, and accessible focus/active styles.
   - Reusable animation utilities (pulse, shimmer, float, pop, wiggle,
     slide-underline, ripple helper) with examples in comments.
   - Navbar, cards, surface tokens, and a custom scrollbar tuned to the theme.
   - Accessibility: focus-visible styles, reduced-motion support, and
     clear disabled states.
   - Small JS-ripple helper is mentioned in comments (CSS provided).
   --------------------------------------------------------------------------
   HOW TO USE (quick)
   1) Save file to: Assets/Modules/base.css
   2) Add to pages: <link rel="stylesheet" href="/Assets/Modules/base.css">
   3) Buttons:
        <button class="btn btn-solid">Primary</button>
        <button class="btn btn-outline">Secondary</button>
        <button class="btn btn-dotted">Micro</button>
        <button class="btn btn-dark">Dark CTA</button>
   4) Add animation helpers:
        <button class="btn btn-solid cta-pulse">Pulse</button>
        <button class="btn btn-outline cta-shimmer">Shimmer</button>
   5) Export / theme tokens: If you need to generate a theme file, read :root.
   --------------------------------------------------------------------------
   VERSION NOTES
   - 2.0.0 (final): premium accent, dark-button system (black), expanded animation
     utilities, refined radii, improved docs/comments, tuned shadows & focus.
   ========================================================================== */

/* --------------------------
   Font import (Exo 2)
   -------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700&display=swap');

/* ==========================
   :root — design tokens
   ========================== */
:root{
  /* layout */
  --max-width: 1600px;
  --content-gap: 20px;

  /* radii */
  --card-radius: 14px;        /* smooth, modern cards */
  --btn-radius: 12px;         /* consistent, refined button radius */
  --pill-radius: 999px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;

  /* base colors (Pure White theme) */
  --base: #ffffff;            /* main page background (60%) */
  --surface: #f4f6f8;         /* panels & cards (30%) */
  --muted: #6b7280;           /* subdued text / labels */
  --text: #0f1724;            /* primary content text */

  /* premium accent (Rich Coral) */
  --accent: #000000;          /* primary accent (10%) */
  --accent-contrast: #ffffff; /* text on accent */
  --accent-strong: #242323;   /* deeper companion for borders/shadows */
  --title-color: #C63C3F;     /* tuned title color for headings */

  /* dark-button / reverse system (solid black) */
  --dark-btn-bg: #000000;     /* black used for dark CTAs */
  --dark-btn-contrast: #ffffff;
  --dark-btn-strong: #0a0a0a;

  /* focus & accessibility */
  --focus-ring: rgba(255,90,95,0.12);

  /* borders & shadows */
  --border-1: 1px solid rgba(15,23,42,0.06);
  --shadow-1: 0 8px 20px rgba(15,23,42,0.06);
  --shadow-2: 0 14px 36px rgba(15,23,42,0.09);
  --shadow-3: 0 24px 60px rgba(15,23,42,0.12);
  --accent-shadow-sm: 0 10px 30px rgba(224,68,73,0.08);
  --accent-shadow-md: 0 18px 44px rgba(224,68,73,0.10);

  /* typography */
  --font-family-base: 'Exo 2', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.45;

  /* motion */
  --easing-fast: cubic-bezier(.2,.9,.2,1);
  --easing-std: cubic-bezier(.22,.82,.29,1);
  --transition-fast: 160ms var(--easing-fast);
  --transition-std: 260ms var(--easing-std);
}

/* ==========================
   Base reset & layout
   ========================== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--text);background:var(--base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}

/* keyboard focus helper (toggle body.show-focus when Tab pressed) */
.show-focus :focus{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:8px}

/* surfaces */
.surface {
  background: var(--surface);
  border-radius: var(--card-radius);
  border: var(--border-1);
  box-shadow: var(--shadow-1);
  color: var(--text);
}
.card {
  background: var(--surface);
  border-radius: var(--card-radius);
  border: var(--border-1);
  padding:16px;
  box-shadow: var(--shadow-1);
}

/* headings */
h1, .h1 { color: var(--title-color); font-weight:700; margin:0; }
h2 { color: var(--title-color); font-weight:700; margin:0; }
.brand-title { color: var(--title-color); font-weight:800; letter-spacing:0.2px; }

/* ==========================
   Button system — base
   ========================== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border-radius:var(--btn-radius);
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
  position:relative;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* accessibility focus */
.btn:focus{ outline:none; box-shadow:0 0 0 6px var(--focus-ring) }

/* disabled */
.btn[disabled], .btn.is-disabled{ opacity:.5; pointer-events:none; transform:none; }

/* press feedback */
.btn:active{ transform: translateY(1px) scale(.995); box-shadow: 0 6px 14px rgba(0,0,0,0.06) inset; }

/* ------------------
   1) SOLID (accent) — primary
   ------------------ */
.btn-solid{
  background:var(--accent);
  color:var(--accent-contrast);
  border:0;
  box-shadow: var(--accent-shadow-sm);
}
.btn-solid:hover{ transform: translateY(-3px); box-shadow: var(--accent-shadow-md); filter:brightness(1.03); }
.btn-solid:active{ transform: translateY(1px) scale(.995); }

/* ------------------
   2) OUTLINE — secondary
   ------------------ */
.btn-outline{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  padding:8px 14px;
  box-shadow:none;
}
.btn-outline:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); background: rgba(255,90,95,0.03); }
.btn-outline:active{ transform: translateY(1px); opacity:0.96; }

/* ------------------
   3) DOTTED / GHOST — micro
   ------------------ */
.btn-dotted{
  background:transparent;
  color:var(--accent);
  border:2px dotted var(--accent);
  padding:8px 14px;
  box-shadow:none;
}
.btn-dotted:hover{ transform: translateY(-2px); opacity:0.95; }

/* ------------------
   4) DARK BUTTONS — solid black reverse CTAs
   ------------------ */
.btn-dark{
  background:var(--dark-btn-bg);
  color:var(--dark-btn-contrast);
  border:0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.btn-dark:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.24); filter:brightness(.98); }
.btn-dark:active{ transform: translateY(1px) scale(.995); }

/* dark outline */
.btn-dark-outline{
  background:transparent;
  color:var(--dark-btn-bg);
  border:2px solid var(--dark-btn-bg);
  padding:8px 14px;
}
.btn-dark-outline:hover{ background: rgba(0,0,0,0.06); color:var(--dark-btn-contrast) }

/* size modifiers */
.btn--sm{ min-height:36px; padding:8px 12px; font-size:13px; border-radius:10px; }
.btn--lg{ min-height:52px; padding:14px 20px; font-size:15px; border-radius:14px; }

/* icon slot */
.btn .icon{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center }

/* focus-visible helper */
.btn:focus-visible{ outline:none; box-shadow:0 0 0 6px var(--focus-ring); border-radius:var(--btn-radius) }

/* ==========================
   Animation utilities / snippets
   These are reusable CSS utilities you can add to any element.
   Usage examples in comments below.
   ========================== */

/* 1) Pulse — gentle breathing (good for primary CTAs) */
.u-pulse, .cta-pulse { animation: pulse-ct 2s infinite; transform-origin:center; }
@keyframes pulse-ct {
  0%   { transform: scale(1); box-shadow: 0 8px 20px rgba(224,68,73,0.04); }
  50%  { transform: scale(1.02); box-shadow: 0 18px 40px rgba(224,68,73,0.08); }
  100% { transform: scale(1); box-shadow: 0 8px 20px rgba(224,68,73,0.04); }
}

/* 2) Shimmer — moving highlight (good for outlines / CTAs) */
.u-shimmer, .cta-shimmer { position:relative; overflow:hidden; }
.u-shimmer::after, .cta-shimmer::after {
  content:""; position:absolute; top:-15%; left:-120%; width:40%; height:140%; transform:skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.06) 100%);
  pointer-events:none;
}
.u-shimmer:hover::after, .cta-shimmer:hover::after { animation: shimmer-move 900ms linear 1; }
@keyframes shimmer-move { from { left:-120% } to { left:120% } }

/* 3) Float — subtle y-axis float (good for cards) */
.u-float { animation: float-ct 6s ease-in-out infinite; will-change: transform; }
@keyframes float-ct {
  0% { transform: translateY(0px) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0px) }
}

/* 4) Pop — quick attention pop for micro-interactions */
.u-pop { animation: pop-ct .42s var(--easing-fast) both; }
@keyframes pop-ct { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* 5) Wiggle — playful micro motion */
.u-wiggle { display:inline-block; animation: wiggle-ct .9s ease-in-out both; }
@keyframes wiggle-ct { 0%{ transform:rotate(0deg) } 25%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } 75%{ transform:rotate(-2deg) } 100%{ transform:rotate(0deg) } }

/* 6) Slide-underline — underline reveal for links */
.u-underline { position:relative; overflow:visible }
.u-underline::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent-strong);
  transform: scaleX(0); transform-origin:left; transition: transform var(--transition-fast);
}
.u-underline:hover::after, .u-underline:focus::after { transform: scaleX(1); }

/* 7) Ripple helper (visual only) — needs tiny JS to insert .ripple element */
.ripple { position:absolute; border-radius:999px; transform: scale(0); animation: ripple-ct .6s var(--easing-fast); pointer-events:none; }
@keyframes ripple-ct { to { transform: scale(2.6); opacity:0; } }

/* 8) Slide-in / entrance utilities */
.u-enter-up { transform: translateY(8px); opacity:0; animation: enter-up .48s var(--transition-std) forwards; }
@keyframes enter-up { to { transform:none; opacity:1 } }
.u-enter-left { transform: translateX(-12px); opacity:0; animation: enter-left .48s var(--transition-std) forwards; }
@keyframes enter-left { to { transform:none; opacity:1 } }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .u-pulse, .u-shimmer::after, .u-float, .u-pop, .u-wiggle, .u-enter-up, .u-enter-left { animation: none !important; transition: none !important; }
}

/* ==========================
   Button micro-interactions & underline
   ========================== */
.btn-outline:hover { box-shadow: 0 10px 28px rgba(15,23,42,0.06) }
.btn-outline::after {
  content:""; position:absolute; left:8px; right:8px; bottom:6px; height:2px; background:transparent;
  transition: background var(--transition-fast), transform var(--transition-fast); border-radius:4px;
}
.btn-outline:hover::after { background: var(--accent-strong); transform: scaleX(1); }

/* ==========================
   Navbar / top bar (modern)
   ========================== */
.site-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--base); border-bottom:var(--border-1); padding:12px 20px; }
.site-nav .brand{ display:flex; align-items:center; gap:12px; }
.site-nav .brand .logo { width:56px; height:56px; border-radius:12px; background:var(--surface); display:grid; place-items:center; color:var(--title-color); font-weight:800; box-shadow:var(--shadow-1) }
.site-nav .links { display:flex; gap:12px; align-items:center; }
.site-nav .links a { padding:8px 12px; border-radius:10px; color:var(--text); font-weight:600; }
.site-nav .links a:hover{ background: rgba(0,0,0,0.02); transform: translateY(-2px); }

/* ==========================
   Custom Scrollbar
   ========================== */
/* webkit */
::-webkit-scrollbar{ height:12px; width:12px; }
::-webkit-scrollbar-track{ background:transparent; border-radius:999px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius:999px; border:3px solid rgba(255,255,255,0.85); min-height:36px;
}
::-webkit-scrollbar-thumb:hover{ filter:brightness(.94) }

/* firefox */
*{ scrollbar-width:thin; scrollbar-color: var(--accent) transparent; }

/* ==========================
   Small helpers and tokens
   ========================== */
.row{ display:flex; gap:var(--content-gap); align-items:center; }
.col{ flex:1 }
.center{ display:grid; place-items:center }
.kicker{ font-weight:700; color:var(--accent); letter-spacing:0.4px; font-size:13px; }
.h1{ font-size:28px; margin:0 }
.muted{ color:var(--muted) }
.code-snippet{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; background:#fff; border:1px solid rgba(15,23,42,0.04); padding:12px; border-radius:8px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 14, 14, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(255, 43, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 43, 43, 0); }
}
/* ==========================
   Useful examples (commented)
   ==========================
   Button markup:
     <button class="btn btn-solid">Primary</button>
     <button class="btn btn-outline">Secondary</button>
     <button class="btn btn-dotted">Micro</button>
     <button class="btn btn-dark">Dark CTA</button>
     <button class="btn btn-dark-outline">Dark outline</button>

   Sizes:
     <button class="btn btn-solid btn--sm">Small</button>
     <button class="btn btn-solid">Default</button>
     <button class="btn btn-solid btn--lg">Large</button>

   Animation helpers:
     <button class="btn btn-solid cta-pulse">Pulse</button>
     <button class="btn btn-outline cta-shimmer">Shimmer</button>
     <div class="card u-float">Floating card</div>

   Ripple usage (tiny JS pattern):
     document.addEventListener('click', function(e){
       const el = e.target.closest('.btn'); if(!el) return;
       const rect = el.getBoundingClientRect();
       const r = document.createElement('span'); r.className = 'ripple';
       const size = Math.max(rect.width, rect.height) * 1.2;
       r.style.width = r.style.height = size + 'px';
       r.style.left = (e.clientX - rect.left - size/2) + 'px';
       r.style.top = (e.clientY - rect.top - size/2) + 'px';
       r.style.background = getComputedStyle(el).backgroundColor;
       el.appendChild(r); r.addEventListener('animationend', ()=> r.remove(), {once:true});
     });

   Notes:
   - Prefer .btn-solid for main actions (~60% of CTAs).
   - Use .btn-outline for secondary actions (~30%).
   - Use .btn-dotted or .btn-dark-outline for micro actions (~10%).
   ========================== */

/* ==========================
   End of file — version 2.0.0
   ========================================================================== */