/*
================================================================================
TRADEMARK: OnlyBenefits™
THEME: ICU BLUE — Dark Luxury (Theme 7)
FILENAME: Assets/Resources/base.css
VERSION: 1.0.0
AUTHOR: ( SECRET TEAM )
DATED: 2025-09-29
LICENSE: Proprietary (onlybenefits.fun) — Contact: hello@onlybenefits.fun

DESCRIPTION:
  Core design tokens and base utility styles for the "ICU BLUE" dark-luxury
  theme used across OnlyBenefits. This file centralizes color variables,
  default component styling (buttons, cards, containers), motion patterns,
  and special button shapes (diamond, hexagon, star) with recommended
  usage notes.

HOW TO USE:
  1. Place this file at: Assets/Resources/base.css and ensure nav.php
     includes: <link rel="stylesheet" href="/Assets/Resources/base.css">
  2. Keep this file as the global theme token provider — other component
     CSS should consume these variables (do not hardcode colors).
  3. Use semantic classes shown below (btn, btn-primary, card, container)
     so theme updates cascade seamlessly.

TRADEMARK TEXT:
  OnlyBenefits™ is a trademark of OnlyBenefits (onlybenefits.fun). All
  proprietary styles in this file are the property of OnlyBenefits.

NOTES:
  - This stylesheet focuses on accessibility (contrast), motion for affordance,
    and a consistent dark luxury visual language (deep surfaces, icy-blue
    accents, luminous sheen).
  - If you need a lighter variant, create another root (e.g. :root[data-variant])
    and override the tokens.
================================================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700;900&display=swap');

:root{
  /* --- ICU BLUE DARK LUXURY Tokens --- */
  --ib-bg: #0d1a2b;   /* page background */
  --ib-surface: #07101a;                             /* cards / panels */
  --ib-elev: #0b1520;                                /* elevated surface */

  --ib-accent: #47c7ff;                              /* primary icy blue */
  --ib-accent-2: #9ee8ff;                            /* secondary accent / gradient end */
  --ib-warm-accent: #66f0c6;                         /* use for supportive CTAs sparingly */

  --ib-text: #EAF8FF;                                /* primary copy (soft white, cool) */
  --ib-muted: #95a9b9;                               /* secondary copy */
  --ib-muted-2: rgba(234,248,255,0.18);

  --ib-glow: rgba(71,199,255,0.14);                  /* general glow for hover states */
  --ib-sheen: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));

  --ib-card-radius: 14px;
  --ib-btn-radius: 12px;

  --ib-shadow-xs: 0 6px 18px rgba(2,8,12,0.6);
  --ib-shadow-sm: 0 12px 34px rgba(2,8,12,0.64);
  --ib-shadow-lg: 0 26px 80px rgba(2,8,12,0.72);

  --ib-font-base: 'Exo', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --ib-font-display: 'Exo', 'Playfair Display', serif;

  /* Motion timing — keep consistent across components */
  --ib-speed-fast: 140ms;
  --ib-speed: 260ms;
  --ib-speed-slow: 420ms;

  /* Utility sizing */
  --ib-max-width: 1400px;
}

/* =========================
   Global reset & layout
   ========================= */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  min-height:100%;
  background:var(--ib-bg);
  color:var(--ib-text);
  font-family:var(--ib-font-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

.container{ max-width:var(--ib-max-width); margin:0 auto; padding:28px; }

/* Links */
a{ color:var(--ib-accent); text-decoration:none; }
a:focus, a:hover{ text-decoration:underline; }

/* Accessibility helpers */
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* =========================
   Cards / Panels (default hover and sheen)
   ========================= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--ib-card-radius);
  padding:18px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow:var(--ib-shadow-sm);
  transition: transform var(--ib-speed) ease, box-shadow var(--ib-speed) ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  /* subtle sheen element used on hover */
  content: "";
  position:absolute; left:-40%; top:-20%; width:60%; height:260%;
  background: var(--ib-sheen);
  transform: rotate(25deg) translateX(-120%);
  opacity:0; pointer-events:none; mix-blend-mode:overlay;
  transition: transform 600ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
}

.card:hover{
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--ib-shadow-lg), 0 0 40px var(--ib-glow);
}
.card:hover::before{ transform: rotate(25deg) translateX(0%); opacity:1; }

/* Use .card--glass for glassy panels */
.card--glass{ background: rgba(10,16,22,0.45); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.03); }

/* =========================
   Buttons: base + types
   - All buttons are designed for high contrast on dark surfaces.
   - Primary uses the icy gradient; button-text set for accessibility.
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px; border-radius:var(--ib-btn-radius); border:0; cursor:pointer;
  font-weight:700; letter-spacing:0.2px; transition: transform var(--ib-speed-fast) ease, box-shadow var(--ib-speed) ease, opacity var(--ib-speed) ease;
  box-shadow: var(--ib-shadow-xs);
  background: transparent; color:var(--ib-text);
}

/* Primary: used for main CTAs */
.btn-primary{
  background: linear-gradient(135deg, var(--ib-accent), var(--ib-accent-2));
  color: #051418; /* dark text for light-ish gradient */
  border: 1px solid rgba(0,0,0,0.22);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)); mix-blend-mode:overlay; opacity:0; 
  transition: transform 600ms ease, opacity 280ms ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 22px 60px rgba(2,8,12,0.7), 0 0 36px var(--ib-glow); }
.btn-primary:hover::after{ transform: translateX(4%) rotate(15deg); opacity:1; }
.btn-primary:active{ transform: translateY(2px) scale(.985); box-shadow: var(--ib-shadow-xs); }

/* Secondary outline: use for less emphasis */
.btn-outline{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--ib-text); }
.btn-outline:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,8,12,0.68); }

/* Ghost: subtle actions */
.btn-ghost{ background:transparent; color:var(--ib-accent); border:1px dashed rgba(255,255,255,0.03); }

/* Soft: low emphasis */
.btn-soft{ background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); color:var(--ib-text); border:1px solid rgba(255,255,255,0.03);} 

/* Pill */
.btn-pill{ border-radius:999px; padding:12px 22px; }

/* 3D heavy CTA */
.btn-3d{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  color:var(--ib-text);
  border:1px solid rgba(255,255,255,0.04);
}
.btn-3d:hover{ transform: translateY(-10px); box-shadow: var(--ib-shadow-lg), 0 0 36px var(--ib-glow); }

/* Icon small */
.btn-icon{ width:44px; height:44px; padding:0; border-radius:10px; display:grid; place-items:center; }

/* =========================
   Diamond / Hexagon / Star Buttons
   - These are decorative / micro-interaction buttons. Use sparingly.
   - They are heavier on visual affordance and best used for single-icon quick actions
     (quick-create, favourite, boost, reward, premium actions). They should not be
     used for primary CTAs in long forms or accessibility-critical flows.
   ========================= */

/* Diamond: rotated square. Good for quick actions in toolbars. */
.btn-diamond{
  width:64px; height:64px; padding:0; display:grid; place-items:center; background: linear-gradient(135deg,var(--ib-accent),var(--ib-accent-2)); color:#051418; border:0; border-radius:12px; transform: rotate(45deg); transition: transform var(--ib-speed) ease, box-shadow var(--ib-speed) ease;
}
.btn-diamond > *{ transform: rotate(-45deg); }
.btn-diamond:hover{ transform: rotate(45deg) translateY(-8px) scale(1.04); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 40px var(--ib-glow); }

/* Hexagon: clip-path for unique CTA. Use for badges, rewards, premium toggles. */
.btn-hex{
  padding:10px 18px; background: linear-gradient(135deg,var(--ib-accent),var(--ib-accent-2)); color:#051418; border:0; border-radius:8px; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); transition: transform var(--ib-speed) ease, box-shadow var(--ib-speed) ease;
}
.btn-hex:hover{ transform: translateY(-8px) scale(1.03); box-shadow: 0 26px 70px rgba(0,0,0,0.7), 0 0 36px var(--ib-glow); }

/* Star button: use for 'featured' or 'super-like' style affordances.
   Clip-path for a 5-point star — heavier and decorative. Keep accessible label. */
.btn-star{
  width:72px; height:72px; padding:0; display:grid; place-items:center; border:0; background: linear-gradient(135deg,var(--ib-accent-2),var(--ib-accent)); color:#051418; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: transform var(--ib-speed) ease, box-shadow var(--ib-speed) ease;
}
.btn-star:hover{ transform: translateY(-6px) scale(1.04); box-shadow: 0 28px 80px rgba(0,0,0,0.75), 0 0 46px var(--ib-glow); }

/* Accessibility: make sure these decorative shapes have text alternatives */
.btn-diamond[aria-label], .btn-hex[aria-label], .btn-star[aria-label] { position:relative; }

/* =========================
   Focus & keyboard states
   ========================= */
.btn:focus{ outline: none; box-shadow: 0 0 0 4px rgba(71,199,255,0.12), 0 12px 40px rgba(2,8,12,0.64); }
button:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* =========================
   Helper utilities: when/where to use special buttons
   ========================= */
/*
  USAGE GUIDELINES
  ---------------
  - .btn-primary: use for main, page-level CTAs where you need highest attention.
  - .btn-outline: secondary actions; safe for forms and nav.
  - .btn-ghost / .btn-soft: low emphasis, supporting actions.
  - .btn-3d: use for premium micro-interactions (donate, tip, send badge) to
    give tactile 3D sense in the dark UI.
  - .btn-diamond: toolbar quick actions (create, quick compose). Keep a
    textual label off-screen (aria-label) for screen reader users.
  - .btn-hex: use for reward icons or tiered actions (e.g. premium toggle).
  - .btn-star: use sparingly for 'super-like', 'feature', or gamified actions.

  IMPORTANT: Decorative-shape buttons must always include an accessible label
  and should be paired with a nearby textual affordance in critical flows.
*/

/* =========================
   Component defaults
   - Default container hover effects are placed here so components inherit them.
   ========================= */
.section{ padding:20px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border:1px solid rgba(255,255,255,0.03); transition: transform var(--ib-speed) ease, box-shadow var(--ib-speed) ease; }
.section:hover{ transform: translateY(-6px); box-shadow: var(--ib-shadow-lg), 0 0 36px var(--ib-glow); }

.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width:980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .card-grid{ grid-template-columns: 1fr; } }

/* inputs */
.input, input[type='email'], textarea{
  width:100%; padding:12px 14px; border-radius:10px; background: rgba(255,255,255,0.02); color:var(--ib-text); border:1px solid rgba(255,255,255,0.04);
}
.input:focus, input:focus, textarea:focus{ outline:none; box-shadow: 0 0 0 4px rgba(71,199,255,0.08); border-color: rgba(71,199,255,0.18); }

/* small helpers for badges */
.badge{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background: linear-gradient(135deg,var(--ib-accent),var(--ib-accent-2)); color:#051418; font-weight:700; }

/* =========================
   Theme tune checklist (developer notes)
   =========================
   - Keep primary text (var(--ib-text)) for body copy.
   - Use --ib-accent for interactive elements and highlights.
   - Use sheen on images/cards sparingly to imply premium material.
   - For dark-on-light gradient buttons, ensure text contrast passes WCAG AA.
   - Avoid using shape-buttons for critical flows without accompanying text.
*/

/* End of ICU BLUE base.css */