/* ==========================================
   Maastricht University SBE Alumni Network
   Core Design System & Stylesheet (May 2026)
   ========================================== */

@layer reset, base, tokens, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }
}

@layer tokens {
  :root {
    /* ===========================================================
       UNICIRCLE PERSONAL COLOUR THEME (June 2026)
       Palette extracted from the blue mosaic "Queen" artwork —
       a continuous range of blues from a near-white frost grout,
       through luminous sky and signature azure, down to a deep
       navy/indigo base. Token NAMES are kept for compatibility;
       only the VALUES changed, so the whole platform re-skins.
       Reference hexes in comments for easy tuning.
       =========================================================== */
    --um-dark-blue: oklch(0.25 0.075 256);   /* #0E2A4F - Deep navy/indigo base (structure) */
    --um-orange-red: oklch(0.56 0.145 252);  /* #1E6FC4 - Signature azure (primary accent/CTA) */
    --um-light-blue: oklch(0.68 0.125 238);  /* #2E97D6 - Luminous sky blue (links/secondary) */
    --um-white: oklch(1.00 0.00 0);          /* #FFFFFF */

    /* Extended mosaic scale (new) — light → dark blues from the artwork */
    --uc-frost: oklch(0.95 0.022 240);       /* #E7F1FA - frost / grout near-white */
    --uc-ice: oklch(0.87 0.05 244);          /* #BFD9EE - icy crown highlight */
    --uc-sky: oklch(0.68 0.125 238);         /* #2E97D6 - sky (= light-blue) */
    --uc-azure: oklch(0.56 0.145 252);       /* #1E6FC4 - signature azure (= accent) */
    --uc-cobalt: oklch(0.42 0.115 256);      /* #1C4C8A - royal cobalt (wave body) */
    --uc-navy: oklch(0.25 0.075 256);        /* #0E2A4F - navy base (= dark-blue) */

    /* Academic degree badges — recoloured into the blue range */
    --um-bachelor: oklch(0.70 0.105 240);    /* #5BA3DC - Bachelor: light sky */
    --um-master: oklch(0.42 0.115 256);      /* #1C4C8A - Master: deep cobalt */

    /* Semantic UI Theme Palette - Bright Mode (cool mosaic-white surfaces) */
    --color-bg: oklch(0.975 0.008 240);       /* #F4F8FC - cool mosaic-white background */
    --color-surface: oklch(1.00 0.00 0);      /* #FFFFFF - Pure white card surface */
    --color-surface-hover: oklch(0.965 0.012 240); /* Soft cool hover */
    --color-border: oklch(0.905 0.016 240);   /* Soft cool border */
    --color-text-primary: oklch(0.20 0.025 256); /* Cool charcoal-navy text */
    --color-text-secondary: oklch(0.44 0.022 250); /* Medium cool-grey text */
    --color-text-muted: oklch(0.60 0.018 245);  /* Muted cool-grey text */
    --color-accent-bg: oklch(0.56 0.145 252 / 0.10); /* Azure tint wash */
    --color-premium: oklch(0.42 0.115 256);   /* Premium cobalt-blue */

    /* === TYPOGRAPHY TOKENS === */
    --font-heading: 'Outfit', 'Thesis Sans', 'TheSans', 'Verdana', sans-serif;
    --font-body: 'Inter', 'Verdana', 'Geneva', sans-serif;

    --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
    --text-xl: clamp(1.3rem, 1.2rem + 0.3vw, 1.5rem);
    --text-2xl: clamp(1.6rem, 1.5rem + 0.4vw, 1.875rem);
    --text-3xl: clamp(2.0rem, 1.8rem + 0.5vw, 2.5rem);

    /* === SPACING TOKENS === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* === SHAPES & CORNERS === */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* === ELEVATION SHADOWS === */
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
    --shadow-md: 0 4px 12px oklch(0.25 0.075 256 / 0.06), 0 1px 3px oklch(0 0 0 / 0.02);
    --shadow-lg: 0 12px 32px oklch(0.25 0.075 256 / 0.12), 0 2px 8px oklch(0 0 0 / 0.04);
    --shadow-glow: 0 0 20px oklch(0.56 0.145 252 / 0.20);

    /* === TRANSITIONS === */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    transition: background-color var(--transition-normal), color var(--transition-normal);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-bg);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }

  /* Accessibility skip-link */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &:focus {
      position: fixed;
      top: var(--space-4);
      left: var(--space-4);
      width: auto;
      height: auto;
      padding: var(--space-3) var(--space-6);
      background: var(--um-orange-red);
      color: var(--um-white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      z-index: 99999;
      font-family: var(--font-heading);
      font-weight: 600;
    }
  }

  /* Focus rings */
  :focus-visible {
    outline: 2px solid var(--um-orange-red);
    outline-offset: 3px;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .text-muted { color: var(--color-text-muted); }
  .font-heading { font-family: var(--font-heading); }
  .font-body { font-family: var(--font-body); }
  
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-2 { gap: var(--space-2); }
  .gap-4 { gap: var(--space-4); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}