/* ═══════════════════════════════════════════════════════════════
   WAZAN PLATFORM — DESIGN TOKENS
   Golden Ratio-based design system for wazan.css and wazan-index.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Golden ratio: 1.618 */

  /* Type scale (base 16px, golden ratio) */
  --font-xs: 0.618rem;    /* ~10px */
  --font-sm: 0.764rem;    /* ~12px */
  --font-base: 1rem;      /* 16px */
  --font-md: 1.236rem;    /* ~20px */
  --font-lg: 1.618rem;    /* ~26px */
  --font-xl: 2.618rem;    /* ~42px */
  --font-2xl: 4.236rem;   /* ~68px */

  /* Spacing scale (base 8px, golden ratio) */
  --space-xs: 0.309rem;   /* ~5px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.809rem;   /* ~13px */
  --space-lg: 1.309rem;   /* ~21px */
  --space-xl: 2.118rem;   /* ~34px */
  --space-2xl: 3.427rem;  /* ~55px */
  --space-3xl: 5.545rem;  /* ~89px */

  /* Colors - Maldives Sales palette (from logo) */
  --brand: #0891B2;           /* ocean teal — primary CTA, links */
  --accent: #2DD4BF;          /* turquoise aqua — highlights, badges */
  --success: #30d158;
  --color-primary: var(--brand);
  --color-primary-light: #67E8F9;  /* light cyan shimmer */
  --color-primary-dark: #0E7490;   /* deep teal */
  --color-accent: #B8C4CC;         /* chrome silver */
  --color-accent-light: #D1D9E0;   /* light chrome */
  --ocean-950: #021114;            /* deepest sea */
  --ocean-900: #042F2E;            /* dark teal-black */
  --ocean-800: #0F4C4A;            /* mid ocean */
  --ocean-700: #0D9488;            /* rich teal */
  --sand-100: #f5f4ee;
  --sand-200: #ebe7dd;

  /* Background */
  --bg-primary: var(--ocean-950);
  --bg-secondary: var(--ocean-900);
  --bg-card: rgba(255,255,255,0.08);
  --bg-card-hover: rgba(255,255,255,0.14);

  /* Text - WCAG AA compliant */
  --text-primary: #f5f5f5;
  --text-secondary: rgba(255,255,255,0.78);
  --text-tertiary: rgba(255,255,255,0.56);
  --text-inverse: #0a0a0a;

  /* Liquid glass */
  --glass-blur-heavy: 40px;
  --glass-blur: 24px;
  --glass-blur-light: 14px;
  --glass-fill: rgba(255,255,255,0.16);
  --glass-fill-strong: rgba(255,255,255,0.22);
  --glass-fill-soft: rgba(255,255,255,0.1);
  --glass-fill-dark: rgba(5,14,25,0.58);
  --glass-stroke: rgba(255,255,255,0.18);
  --glass-stroke-strong: rgba(255,255,255,0.28);
  --glass-shadow:
    0 18px 50px rgba(0,0,0,0.32),
    0 6px 22px rgba(4,11,18,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);

  /* Legacy aliases */
  --teal: var(--color-primary);
  --tl: var(--color-primary-light);
  --aqua: var(--color-primary-light);
  --gold: var(--color-accent);
  --txt: var(--text-primary);
  --txt2: var(--text-secondary);
  --txt3: var(--text-tertiary);

  /* Additional legacy colors */
  --black: var(--ocean-950);
  --white: #fff;
  --gray-50: #fafafa;
  --gray-100: var(--sand-100);
  --gray-200: var(--sand-200);
  --gray-400: #90929b;
  --gray-500: #6d717c;
  --gray-600: #18202b;
  --blue: #0891B2;
  --tll: #67E8F9;
  --gl: #B8C4CC;
  --deep: var(--ocean-900);

  /* Card/Surface styles */
  --card-bg: var(--glass-fill-soft);
  --card-bg-hover: var(--glass-fill);
  --card-border: rgba(255, 255, 255, 0.12);
  --surface-panel: rgba(255,255,255,0.06);
  --surface-panel-strong: rgba(255,255,255,0.12);
  --surface-muted: rgba(255,255,255,0.04);

  /* Borders & Shadows */
  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-glass: var(--glass-shadow);

  /* Border radius - golden ratio */
  --radius-sm: 0.236rem;  /* ~4px */
  --radius-md: 0.382rem;  /* ~6px */
  --radius-lg: 0.618rem;  /* ~10px */
  --radius-xl: 1rem;      /* 16px */
  --rc: 20px;             /* legacy */

  /* Typography */
  --font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Global focus, contrast, motion
   ═══════════════════════════════════════════════════════════════ */

/* Focus-visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  top: 0;
}