/* Green Apple Design System — brand stylesheet for code projects.
   Night is the default. Add class "ga-light" on <html> (or any wrapper) for Light.
   Full rules: BRAND-RULES.md · Design System: https://claude.ai/artifact/ChCByDN7oL254tX3oxuAhi */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root, .ga-night {
  /* brand (same in both modes) */
  --ga-charcoal: #16302E;
  --ga-night: #0B1A19;
  --ga-wave-green: #6FB53F;   /* provisional until the wave colour is signed off */

  /* Night (default) */
  --ga-bg: #0B1A19;
  --ga-surface: #132A28;
  --ga-surface-raised: #1E3B38;
  --ga-ink: #FFFFFF;
  --ga-ink-muted: rgba(255, 255, 255, 0.70);
  --ga-ink-dim: rgba(255, 255, 255, 0.45);
  --ga-hairline: rgba(255, 255, 255, 0.10);
  --ga-highlight: #A9DC86;
  --ga-eyebrow: #A9DC86;
  --ga-action: #6FB53F;
  --ga-action-ink: #0B1A19;
  --ga-green-tint: #1E3B38;
  --ga-glass: rgba(255, 255, 255, 0.08);
  --ga-glass-edge: rgba(255, 255, 255, 0.16);
  --ga-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 30px rgba(0, 0, 0, 0.25);
  --ga-focus: #6FB53F;
  --ga-error: #F97066;
  --ga-logo: url("logos/horizontal-white.svg");

  /* type */
  --ga-font-display: Poppins, system-ui, sans-serif;
  --ga-font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --ga-font-arabic: "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --ga-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* shape & space */
  --ga-radius-field: 14px;
  --ga-radius-icon: 16px;
  --ga-radius-card-sm: 24px;
  --ga-radius-card: 28px;
  --ga-radius-panel: 40px;
  --ga-radius-pill: 999px;
  --ga-space-1: 4px; --ga-space-2: 8px; --ga-space-3: 12px; --ga-space-4: 16px; --ga-space-6: 24px;
  --ga-space-8: 32px; --ga-space-12: 48px; --ga-space-16: 64px; --ga-space-24: 96px; --ga-space-32: 128px;
  --ga-max-width: 1240px;

  /* motion */
  --ga-ease: cubic-bezier(.2, .8, .2, 1);
  --ga-fast: 180ms;
  --ga-base: 420ms;
}

.ga-light {
  --ga-bg: #FFFFFF;
  --ga-surface: #F5F5F7;
  --ga-surface-raised: #FFFFFF;
  --ga-ink: #16302E;
  --ga-ink-muted: #5B6E6C;
  --ga-ink-dim: #6E6E73;
  --ga-hairline: #E5E5EA;
  --ga-highlight: #4E8F2A;
  --ga-eyebrow: #3F6E28;
  --ga-action: #16302E;
  --ga-action-ink: #FFFFFF;
  --ga-green-tint: #E2F2D6;
  --ga-glass: rgba(255, 255, 255, 0.55);
  --ga-glass-edge: rgba(255, 255, 255, 0.90);
  --ga-glass-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 0.5px rgba(22, 48, 46, 0.08), 0 8px 30px rgba(22, 48, 46, 0.08);
  --ga-focus: #16302E;
  --ga-error: #BA1A1A;
  --ga-logo: url("logos/horizontal-colour.svg");
}

/* base */
body { margin: 0; background: var(--ga-bg); color: var(--ga-ink); font-family: var(--ga-font-sans); font-size: 17px; line-height: 1.6; transition: background var(--ga-base) var(--ga-ease), color var(--ga-base) var(--ga-ease); }
[dir="rtl"], [lang="ar"] { font-family: var(--ga-font-arabic); font-size: 18.5px; line-height: 1.85; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--ga-focus); outline-offset: 2px; }

/* type */
.ga-hero { font-family: var(--ga-font-display); font-weight: 600; font-size: clamp(42px, 6vw, 76px); line-height: 1.04; letter-spacing: -0.04em; margin: 0; }
.ga-h2 { font-family: var(--ga-font-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.ga-eyebrow { font-family: var(--ga-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ga-eyebrow); }
.ga-highlight { color: var(--ga-highlight); }
.ga-muted { color: var(--ga-ink-muted); }
[dir="rtl"] .ga-hero, [dir="rtl"] .ga-h2 { font-family: var(--ga-font-arabic); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
[dir="rtl"] .ga-eyebrow { font-family: var(--ga-font-arabic); font-size: 15px; letter-spacing: 0; text-transform: none; }

/* layout */
.ga-wrap { max-width: var(--ga-max-width); margin: 0 auto; padding: 0 var(--ga-space-8); box-sizing: border-box; }
@media (max-width: 640px) { .ga-wrap { padding: 0 var(--ga-space-4); } }
.ga-card { background: var(--ga-surface); border-radius: var(--ga-radius-card); padding: var(--ga-space-8); }

/* Liquid Glass — floating controls ONLY (nav pill, secondary buttons, tab bars, small pills) */
.ga-glass { background: var(--ga-glass); border: 1px solid var(--ga-glass-edge); box-shadow: var(--ga-glass-shadow); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }

/* buttons */
.ga-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: var(--ga-radius-pill); border: 0; background: var(--ga-action); color: var(--ga-action-ink); font: 600 15px/1 var(--ga-font-sans); text-decoration: none; cursor: pointer; transition: transform var(--ga-fast) var(--ga-ease), opacity var(--ga-fast) var(--ga-ease); }
.ga-btn:hover { opacity: .9; } .ga-btn:active { transform: scale(.98); }
.ga-btn.ga-glass { background: var(--ga-glass); color: var(--ga-ink); }
.ga-field { height: 48px; padding: 0 16px; border-radius: var(--ga-radius-field); border: 1px solid transparent; background: var(--ga-surface); color: var(--ga-ink); font: inherit; }
.ga-field:focus { background: var(--ga-bg); border-color: var(--ga-focus); outline: none; }

/* waves (pair with an SVG of wave paths: first path class ga-wave-accent, others ga-wave-line) */
.ga-wave-accent { fill: none; stroke: var(--ga-wave-green); stroke-width: 1.6; }
.ga-wave-line { fill: none; stroke: var(--ga-ink); stroke-opacity: .14; stroke-width: 1; }
@keyframes ga-drift { to { transform: translateX(-50%); } }
.ga-waves-move { animation: ga-drift 12s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ga-waves-move { animation: none; } * { transition: none !important; } }