/* ============================================================
   FYPDZ — DESIGN TOKENS
   Deep-space navy, electric cyan/blue, warm golden accent
   ============================================================ */

:root {
  /* Base palette */
  --color-bg:            #030612;
  --color-bg-2:          #060B1F;
  --color-surface:       #0A1230;
  --color-surface-2:     #0F1A3E;
  --color-border:        rgba(120, 160, 255, 0.10);
  --color-border-2:      rgba(120, 160, 255, 0.20);

  /* Text */
  --color-text:          #F4F7FF;
  --color-text-2:        #B7C3E4;
  --color-text-3:        #6A7AA6;

  /* Accents */
  --color-primary:       #00E5FF;   /* electric cyan */
  --color-primary-2:     #4C7BFF;   /* deep blue */
  --color-warm:          #FF7A3D;   /* Warm golden orange */
  --color-gold:          #F7CE45;   /* soft gold */
  --color-emerald:       #29E0A6;   /* growth/agri */
  --color-magenta:       #FF3DBE;   /* intermediary */

  /* Gradients */
  --grad-hero:           linear-gradient(120deg, #00E5FF 0%, #4C7BFF 40%, #FF7A3D 100%);
  --grad-cyan:           linear-gradient(135deg, #00E5FF 0%, #4C7BFF 100%);
  --grad-warm:           linear-gradient(135deg, #FF7A3D 0%, #F7CE45 100%);
  --grad-panel:          linear-gradient(180deg, rgba(10,18,48,0.9) 0%, rgba(6,11,31,0.6) 100%);
  --grad-glass:          linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-arabic:  'Noto Sans Arabic', 'Inter', system-ui, sans-serif;

  /* Type scale */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    2rem;
  --text-4xl:    2.75rem;
  --text-5xl:    3.75rem;
  --text-hero:   clamp(2.75rem, 1rem + 6.2vw, 6.75rem);
  --text-mega:   clamp(3.5rem, 2rem + 8vw, 9rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* Radii */
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-2xl: 42px;
  --radius-pill: 999px;

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   180ms;
  --dur:        420ms;
  --dur-slow:   900ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--color-primary); color: var(--color-bg); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
canvas { display: block; }

/* RTL adaptations */
html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }