/* PAPAN SSD LTD — variables.css */

:root {
  /* Official PAPAN colours */
  --color-sky-blue: #29aae1;
  --color-deep-blue: #15477c;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Premium neutral system */
  --color-ink: #071421;
  --color-ink-soft: #132333;
  --color-text: #253242;
  --color-muted: #64748b;
  --color-muted-2: #8494a8;
  --color-light: #f5f8fa;
  --color-light-2: #eef6fb;
  --color-surface: #ffffff;
  --color-surface-blue: #edf8fd;
  --color-border: #d9e6ef;
  --color-border-strong: #b8cfdf;

  /* Functional colours */
  --color-success: #1f8a4c;
  --color-warning: #f5a623;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* RGB channels */
  --sky-rgb: 41, 170, 225;
  --deep-rgb: 21, 71, 124;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #15477c 0%, #1e6fa8 48%, #29aae1 100%);
  --gradient-dark: linear-gradient(135deg, #000000 0%, #071421 42%, #15477c 100%);
  --gradient-water:
    radial-gradient(circle at 18% 20%, rgba(41, 170, 225, .24), transparent 34%),
    linear-gradient(135deg, rgba(21, 71, 124, .98), rgba(41, 170, 225, .92));
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
  --gradient-metal: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(237, 248, 253, .82));
  --gradient-glass:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));

  /* Typography */
  --font-heading: "Sora", "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Arial, system-ui, sans-serif;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 800;
  --weight-black: 950;

  /* Layout */
  --container: 1180px;
  --container-wide: 1360px;
  --container-narrow: 880px;
  --gutter: clamp(18px, 4vw, 32px);

  /* Section rhythm */
  --section-xs: clamp(36px, 5vw, 54px);
  --section-sm: clamp(48px, 6vw, 76px);
  --section: clamp(72px, 9vw, 124px);
  --section-lg: clamp(92px, 12vw, 164px);
  --section-xl: clamp(110px, 14vw, 190px);

  /* Spacing scale */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 38px;
  --radius-2xl: 52px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 16px 50px rgba(21, 71, 124, .12);
  --shadow-card: 0 14px 42px rgba(7, 20, 33, .10);
  --shadow-float: 0 30px 90px rgba(21, 71, 124, .18);
  --shadow-blue: 0 20px 70px rgba(41, 170, 225, .22);
  --shadow-dark: 0 24px 80px rgba(0, 0, 0, .24);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, .18);

  /* Borders */
  --line: 1px solid var(--color-border);
  --line-strong: 1px solid var(--color-border-strong);
  --line-blue: 1px solid rgba(41, 170, 225, .26);
  --line-white: 1px solid rgba(255, 255, 255, .18);
  --line-dark: 1px solid rgba(7, 20, 33, .12);

  /* Motion */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --duration-fast: 180ms;
  --duration: 360ms;
  --duration-slow: 720ms;
  --duration-loader: 900ms;

  /* Header */
  --topbar-height: 42px;
  --nav-height: 86px;
  --header-total: 128px;

  /* Layers */
  --z-base: 1;
  --z-raised: 5;
  --z-sticky: 100;
  --z-dropdown: 8000;
  --z-overlay: 8500;
  --z-header: 9000;
  --z-loader: 10000;

  /* Media ratios */
  --ratio-video: 16 / 9;
  --ratio-wide: 16 / 10;
  --ratio-photo: 4 / 3;
  --ratio-square: 1;

  /* Forms */
  --input-height: 54px;
  --input-radius: var(--radius-sm);
  --input-border: 1px solid var(--color-border);
  --input-focus: 0 0 0 4px rgba(41, 170, 225, .12);

  /* Header offset for anchor links */
  --anchor-offset: calc(var(--header-total) + 24px);
}

/* Tablet rhythm */
@media (max-width: 900px) {
  :root {
    --topbar-height: 0px;
    --nav-height: 78px;
    --header-total: 78px;
    --section-sm: clamp(44px, 8vw, 64px);
    --section: clamp(64px, 10vw, 92px);
    --section-lg: clamp(76px, 12vw, 112px);
    --gutter: clamp(18px, 5vw, 28px);
  }
}

/* Mobile rhythm */
@media (max-width: 680px) {
  :root {
    --nav-height: 76px;
    --header-total: 76px;
    --section-xs: 34px;
    --section-sm: 48px;
    --section: 68px;
    --section-lg: 78px;
    --gutter: 18px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 34px;
  }
}

/* Small mobile */
@media (max-width: 420px) {
  :root {
    --gutter: 14px;
    --nav-height: 74px;
    --header-total: 74px;
    --section: 58px;
    --section-lg: 68px;
  }
}

/* Dark preference support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}