/* global.css - base reset + background atmosphere
   - Calm/cool palette
   - Uses bg-pattern.jpg (user provided) but reduced opacity so UI stays clean
*/

:root{
  /* Core palette */
  /* Soft, elegant base (premium neutral) */
  /* Base colours updated for a lighter, more balanced palette */
  /*
   * Refine the base palette to more closely mirror the look and feel of the
   * reference video.  The background is now a nearly–white neutral with a
   * hint of blue to convey airiness without appearing washed out.  Surface
   * colours (used for cards and panels) are solid white to maximise
   * contrast against the light page backdrop.  Text colours are deep
   * charcoal blues which read clearly on light backgrounds, while muted
   * copy uses a mid–tone slate.
   */
  --bg-base: #f5f7fc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  /* Legacy vars (for existing styles.css components) */
  --bg: var(--bg-base);
  --card: var(--surface);
  --primary: var(--primary-2);
  --accent: rgba(var(--primary-rgb), .15);

  /* Brand accent (updated to match the softened palette) */
  /*
   * Primary brand colours have been shifted toward a richer purple/indigo
   * palette which better complements the dark sidebar while still
   * maintaining a professional air.  The rgb tuple drives semi‑transparent
   * overlays and focus rings in other stylesheets.
   */
  --primary-1: #7f56d9;
  --primary-2: #6366f1;
  --primary-rgb: 124 86 218;

  /* Status */
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;

  /* Radius & shadows */
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --shadow-sm: 0 10px 26px rgba(15, 23, 42, .08);
  --shadow-md: 0 18px 48px rgba(15, 23, 42, .10);

  --transition-fast: 180ms;
  --transition: 260ms;

  /*
   * Spacing scale
   *
   * Define a consistent spacing system that can be used throughout
   * the application.  These values map to multiples of four pixels,
   * enabling predictable rhythm in margins, paddings and gaps.  Use
   * var(--space-1) for very small gaps and var(--space-6) for
   * generous separation.  Adopting a single scale simplifies
   * maintenance and ensures visual harmony across components.
   */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /*
   * Typography scale
   *
   * Provide named font sizes for common typographic elements.  These
   * values are tuned to the overall scale of the UI, with titles
   * slightly larger and more emphatic than base text.  Adjust these
   * values here to globally tweak the visual weight of headings,
   * captions and body copy.
   */
  --font-title: 24px;
  --font-heading: 20px;
  --font-base: 14px;
  --font-small: 12px;

  /*
   * Miscellaneous tokens
   *
   * Provide a small translation distance for hover lifts.  This
   * variable centralises the amount of vertical movement used by
   * interactive elements when hovered, ensuring the same motion
   * throughout the UI.
   */
  --hover-translate-y: -2px;

  /* ------------------------------------------------------------------
   *  Custom brand theme
   *
   *  The following variables redefine the colour palette of the
   *  application based on the company logo provided in the assets.
   *  Existing values defined above remain for backward compatibility,
   *  but these declarations will override them because CSS variables
   *  respect the last assignment.  By centralising the palette here we
   *  can adjust the look and feel of the entire app without touching
   *  individual components.  The new palette draws from deep and light
   *  blues found in the logo, introduces a fresh accent colour, and
   *  tweaks the neutrals to maintain sufficient contrast across the UI.
   */

  /* Primary brand colours */
  --brand-primary: #0839a7; /* dark blue from logo */
  --brand-secondary: #7893d1; /* light blue from logo */
  --brand-accent: #50b5e0; /* soft cyan accent */

  /* Neutral colours */
  --bg-base: #f7faff;      /* very light blue background */
  --surface: #ffffff;      /* surfaces remain white */
  --text: #0f254a;         /* navy text for maximum contrast */
  --muted: #64789c;        /* desaturated slate for hints */
  --border: #d8e3f0;       /* pale blue borders */

  /* Legacy aliases updated to point at the new neutrals */
  --bg: var(--bg-base);
  --card: var(--surface);

  /* Primary tokens redirected to brand colours */
  --primary-1: var(--brand-primary);
  --primary-2: var(--brand-secondary);
  --primary-rgb: 8 57 167; /* rgb for --brand-primary */
  --primary: var(--primary-2);
  --accent: rgba(var(--primary-rgb), .15);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: var(--bg-base);
  overflow-x: hidden;
}

/* Background pattern + subtle overlay */
/* Remove the subtle pattern and overlay layers on the body.  The original design
   used a patterned background (bg-pattern.jpg) and multiple gradient layers
   that created a hazy appearance.  To achieve a crisper, more professional
   look we strip out these decorations entirely.  The pseudo elements remain
   present so that any other styles relying on them do not break, but they
   render nothing. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  /* Remove any background image to eliminate the foggy pattern */
  background-image: none;
  /* Fully transparent to avoid altering the underlying page colour */
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

body::after{
  content: "";
  position: fixed;
  inset: 0;
  /* Remove decorative gradients to keep the page clear */
  background: none;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* App container always sits above background layers */
.app{
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

a{ color: inherit; }

/* Utility */
.hide{ display: none !important; }
.muted{ color: var(--muted); }

/* Better focus (keyboard) */
:focus-visible{
  outline: 3px solid rgba(var(--primary-rgb), .28);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Scrollbar */
@media (hover:hover){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }
  ::-webkit-scrollbar-track{ background: rgba(15,23,42,.05); }
}