/* =========================================================================
   Goodlife — Design Tokens
   Extracted from goodlifepharma.com (logo + homepage screenshot)
   For: internal admin / dashboard housing multiple data portals
   Tone: warm, human, optimistic — but data-credible
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* -------------------------------------------------------------------------
   Brand palette (sampled directly from logo + footer)
   ------------------------------------------------------------------------- */
:root {
  /* Brand — exact sampled values */
  --gl-blue:        #2098D8;   /* logo + footer fill */
  --gl-teal:        #20C8D0;   /* "while" accent in tagline */
  --gl-yellow:      #F0C008;   /* dot of the "o" in logo */

  /* Brand scales (derived; same hue, varied lightness) */
  --gl-blue-50:     #EAF6FC;
  --gl-blue-100:    #CDE8F7;
  --gl-blue-200:    #9BD1EF;
  --gl-blue-300:    #6ABAE7;
  --gl-blue-400:    #3FA8DF;
  --gl-blue-500:    #2098D8;   /* === brand === */
  --gl-blue-600:    #1A7FB6;
  --gl-blue-700:    #146593;
  --gl-blue-800:    #0F4D71;
  --gl-blue-900:    #093652;

  --gl-teal-50:     #E6FAFB;
  --gl-teal-100:    #C2F2F4;
  --gl-teal-200:    #8FE6EA;
  --gl-teal-300:    #5BD9E0;
  --gl-teal-400:    #34CFD6;
  --gl-teal-500:    #20C8D0;   /* === brand === */
  --gl-teal-600:    #1AA5AC;
  --gl-teal-700:    #15858A;
  --gl-teal-800:    #0F6469;
  --gl-teal-900:    #094649;

  --gl-yellow-50:   #FEF8DC;
  --gl-yellow-100:  --gl-yellow-100; /* see below */
  --gl-yellow-200:  #FBE685;
  --gl-yellow-300:  #F7D852;
  --gl-yellow-400:  #F4CC2A;
  --gl-yellow-500:  #F0C008;   /* === brand === */
  --gl-yellow-600:  #CCA206;
  --gl-yellow-700:  #A38205;
  --gl-yellow-800:  #7A6103;
  --gl-yellow-900:  #524002;

  /* Override the placeholder above */
  --gl-yellow-100:  #FDEFAE;
}

/* -------------------------------------------------------------------------
   Neutrals — slightly cool-blue tinted so they sit naturally beside the brand
   Lightness steps follow a ~94 / 88 / 78 / 60 / 45 / 32 / 22 / 14 curve
   ------------------------------------------------------------------------- */
:root {
  --gl-ink-0:       #FFFFFF;
  --gl-ink-25:      #FAFCFD;   /* page bg, very subtle blue tint */
  --gl-ink-50:      #F4F7F9;   /* surface raised */
  --gl-ink-100:     #E7EDF1;   /* hairline / divider light */
  --gl-ink-200:     #D2DCE3;   /* divider, input border */
  --gl-ink-300:     #B3C0CB;   /* placeholder, disabled */
  --gl-ink-400:     #8696A4;   /* muted text */
  --gl-ink-500:     #5F7180;   /* secondary text */
  --gl-ink-600:     #46586A;   /* body text alt */
  --gl-ink-700:     #2F4050;   /* body text */
  --gl-ink-800:     #1C2A38;   /* heading */
  --gl-ink-900:     #0E1A26;   /* hero heading, max contrast */
}

/* -------------------------------------------------------------------------
   Semantic colors (data-display friendly)
   Built so a stoplight feels at home next to the brand cyan/teal.
   ------------------------------------------------------------------------- */
:root {
  --gl-success:     #1FA971;
  --gl-success-50:  #E6F6EE;
  --gl-success-600: #167E55;

  --gl-warning:     var(--gl-yellow-500);
  --gl-warning-50:  #FEF8DC;
  --gl-warning-600: var(--gl-yellow-600);

  --gl-danger:      #D94B4B;
  --gl-danger-50:   #FBEAEA;
  --gl-danger-600:  #A93636;

  --gl-info:        var(--gl-blue-500);
  --gl-info-50:     var(--gl-blue-50);
  --gl-info-600:    var(--gl-blue-600);

  --gl-neutral:     var(--gl-ink-400);
}

/* -------------------------------------------------------------------------
   Chart / data-viz palette
   First 3 are the brand; rest are tuned to be harmonious + colorblind-distinct.
   Use in order for series 1, 2, 3, ...
   ------------------------------------------------------------------------- */
:root {
  --gl-chart-1:  #2098D8;   /* brand blue */
  --gl-chart-2:  #20C8D0;   /* brand teal */
  --gl-chart-3:  #F0C008;   /* brand yellow */
  --gl-chart-4:  #6A5BD9;   /* violet */
  --gl-chart-5:  #1FA971;   /* green */
  --gl-chart-6:  #E07A2B;   /* warm orange */
  --gl-chart-7:  #C13C8A;   /* magenta */
  --gl-chart-8:  #5F7180;   /* neutral */

  /* Soft fills for area charts / heat tiles */
  --gl-chart-1-soft: #CDE8F7;
  --gl-chart-2-soft: #C2F2F4;
  --gl-chart-3-soft: #FDEFAE;
  --gl-chart-4-soft: #DDD8F7;
  --gl-chart-5-soft: #C9EBDB;
  --gl-chart-6-soft: #F7D9BF;
  --gl-chart-7-soft: #F1CFE0;
  --gl-chart-8-soft: #D8DEE3;

  /* Sequential ramp (e.g. heatmaps) — single-hue brand blue */
  --gl-ramp-1: #EAF6FC;
  --gl-ramp-2: #9BD1EF;
  --gl-ramp-3: #3FA8DF;
  --gl-ramp-4: #146593;
  --gl-ramp-5: #093652;

  /* Diverging ramp (e.g. delta vs baseline) — danger ↔ neutral ↔ teal */
  --gl-div--2: #D94B4B;
  --gl-div--1: #F1A5A5;
  --gl-div-0:  #E7EDF1;
  --gl-div-1:  #8FE6EA;
  --gl-div-2:  #20C8D0;
}

/* -------------------------------------------------------------------------
   Surfaces — light mode (default)
   Use these for backgrounds; do not pick from --gl-ink-* directly in product
   code. Component code should reference these semantic surface tokens.
   ------------------------------------------------------------------------- */
:root {
  --gl-bg-app:        var(--gl-ink-25);      /* page background */
  --gl-bg-surface:    var(--gl-ink-0);       /* cards, tables */
  --gl-bg-raised:     var(--gl-ink-0);       /* popovers, modals */
  --gl-bg-sunken:     var(--gl-ink-50);      /* code blocks, empty wells */
  --gl-bg-inverse:    var(--gl-ink-900);     /* tooltip, snackbar */
  --gl-bg-brand:      var(--gl-blue-500);    /* hero / nav bar */
  --gl-bg-brand-soft: var(--gl-blue-50);

  /* Row backgrounds for tables */
  --gl-row-bg:        var(--gl-ink-0);
  --gl-row-bg-alt:    var(--gl-ink-25);
  --gl-row-bg-hover:  var(--gl-blue-50);
  --gl-row-bg-active: var(--gl-blue-100);

  --gl-border-subtle:  var(--gl-ink-100);
  --gl-border:         var(--gl-ink-200);
  --gl-border-strong:  var(--gl-ink-300);
  --gl-border-focus:   var(--gl-blue-500);

  --gl-text-primary:   var(--gl-ink-800);
  --gl-text-secondary: var(--gl-ink-600);
  --gl-text-muted:     var(--gl-ink-400);
  --gl-text-inverse:   var(--gl-ink-0);
  --gl-text-brand:     var(--gl-blue-600);
  --gl-text-link:      var(--gl-blue-600);
  --gl-text-link-hover:var(--gl-blue-700);
}

/* -------------------------------------------------------------------------
   Dark mode
   Activate by adding `data-theme="dark"` to <html> or <body>.
   Surface lifts are darker than the deepest ink (true dark, not just inverted)
   so blue + teal pop against the chrome.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  --gl-bg-app:        #0A1420;
  --gl-bg-surface:    #11202F;
  --gl-bg-raised:     #16293B;
  --gl-bg-sunken:     #0A1420;
  --gl-bg-inverse:    var(--gl-ink-0);
  --gl-bg-brand:      var(--gl-blue-500);
  --gl-bg-brand-soft: #0F2D44;

  --gl-row-bg:        transparent;
  --gl-row-bg-alt:    rgba(255,255,255,0.02);
  --gl-row-bg-hover:  rgba(32,152,216,0.10);
  --gl-row-bg-active: rgba(32,152,216,0.18);

  --gl-border-subtle:  rgba(255,255,255,0.06);
  --gl-border:         rgba(255,255,255,0.10);
  --gl-border-strong:  rgba(255,255,255,0.18);
  --gl-border-focus:   var(--gl-blue-400);

  --gl-text-primary:   #E6EEF5;
  --gl-text-secondary: #B6C4D1;
  --gl-text-muted:     #7E8F9F;
  --gl-text-inverse:   var(--gl-ink-900);
  --gl-text-brand:     var(--gl-blue-300);
  --gl-text-link:      var(--gl-blue-300);
  --gl-text-link-hover:var(--gl-blue-200);

  /* Re-tune semantics so they sit on dark surfaces */
  --gl-success-50:  rgba(31,169,113,0.12);
  --gl-warning-50:  rgba(240,192,8,0.14);
  --gl-danger-50:   rgba(217,75,75,0.14);
  --gl-info-50:     rgba(32,152,216,0.14);
}

/* -------------------------------------------------------------------------
   Typography
   The Goodlife site uses a rounded geometric sans throughout.
   Nunito is the closest Google Font — same friendly tone, broad weight range,
   excellent for both display and dense tabular text. JetBrains Mono for
   numeric / tabular figures inside data tables.
   ------------------------------------------------------------------------- */
:root {
  --gl-font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gl-font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.125 step, 16px base */
  --gl-text-2xs: 0.6875rem;   /* 11px — table footnote */
  --gl-text-xs:  0.75rem;     /* 12px — label, badge */
  --gl-text-sm:  0.8125rem;   /* 13px — table cell */
  --gl-text-md:  0.875rem;    /* 14px — body small */
  --gl-text-base:0.9375rem;   /* 15px — body */
  --gl-text-lg:  1rem;        /* 16px — body emphasis */
  --gl-text-xl:  1.125rem;    /* 18px — subhead */
  --gl-text-2xl: 1.375rem;    /* 22px — card title */
  --gl-text-3xl: 1.75rem;     /* 28px — page title */
  --gl-text-4xl: 2.25rem;     /* 36px — section hero */
  --gl-text-5xl: 3rem;        /* 48px — display */

  --gl-leading-tight: 1.15;
  --gl-leading-snug:  1.3;
  --gl-leading-base:  1.5;
  --gl-leading-loose: 1.7;

  --gl-tracking-tight:  -0.01em;
  --gl-tracking-normal:  0;
  --gl-tracking-wide:    0.04em;
  --gl-tracking-caps:    0.08em;

  --gl-weight-normal:    400;
  --gl-weight-medium:    500;
  --gl-weight-semibold:  600;
  --gl-weight-bold:      700;
  --gl-weight-extrabold: 800;
  --gl-weight-black:     900;
}

/* -------------------------------------------------------------------------
   Spacing — 4px base
   ------------------------------------------------------------------------- */
:root {
  --gl-space-0:  0;
  --gl-space-1:  0.25rem;   /* 4 */
  --gl-space-2:  0.5rem;    /* 8 */
  --gl-space-3:  0.75rem;   /* 12 */
  --gl-space-4:  1rem;      /* 16 */
  --gl-space-5:  1.25rem;   /* 20 */
  --gl-space-6:  1.5rem;    /* 24 */
  --gl-space-8:  2rem;      /* 32 */
  --gl-space-10: 2.5rem;    /* 40 */
  --gl-space-12: 3rem;      /* 48 */
  --gl-space-16: 4rem;      /* 64 */
  --gl-space-20: 5rem;      /* 80 */
  --gl-space-24: 6rem;      /* 96 */
}

/* -------------------------------------------------------------------------
   Radii — the Goodlife brand has rounded letterforms and rounded illustration
   shapes; the system follows suit with generous radii on containers, but
   keeps inputs / rows tighter so dense data still reads cleanly.
   ------------------------------------------------------------------------- */
:root {
  --gl-radius-xs: 4px;     /* inputs, chips */
  --gl-radius-sm: 6px;     /* buttons, badges */
  --gl-radius-md: 10px;    /* cards, panels */
  --gl-radius-lg: 16px;    /* large cards, modal */
  --gl-radius-xl: 24px;    /* hero containers */
  --gl-radius-pill: 999px; /* pill chips, avatars */
}

/* -------------------------------------------------------------------------
   Shadow / elevation — soft, low-saturation, blue-tinted to match the brand
   ------------------------------------------------------------------------- */
:root {
  --gl-shadow-xs: 0 1px 2px rgba(14,26,38,0.04);
  --gl-shadow-sm: 0 1px 3px rgba(14,26,38,0.06), 0 1px 2px rgba(14,26,38,0.04);
  --gl-shadow-md: 0 4px 12px rgba(14,26,38,0.08), 0 1px 3px rgba(14,26,38,0.04);
  --gl-shadow-lg: 0 12px 32px rgba(14,26,38,0.10), 0 4px 8px rgba(14,26,38,0.04);
  --gl-shadow-xl: 0 24px 56px rgba(14,26,38,0.14), 0 8px 16px rgba(14,26,38,0.06);
  --gl-shadow-focus: 0 0 0 3px rgba(32,152,216,0.30);
  --gl-shadow-focus-danger: 0 0 0 3px rgba(217,75,75,0.30);
}
[data-theme="dark"] {
  --gl-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --gl-shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --gl-shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  --gl-shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --gl-shadow-xl: 0 24px 56px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.45);
  --gl-shadow-focus: 0 0 0 3px rgba(63,168,223,0.5);
}

/* -------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */
:root {
  --gl-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --gl-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --gl-ease-emphatic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gl-dur-fast:   120ms;
  --gl-dur-base:   200ms;
  --gl-dur-slow:   320ms;
}

/* -------------------------------------------------------------------------
   Z-index scale
   ------------------------------------------------------------------------- */
:root {
  --gl-z-base:     0;
  --gl-z-raised:   10;
  --gl-z-sticky:   100;
  --gl-z-dropdown: 1000;
  --gl-z-overlay:  1100;
  --gl-z-modal:    1200;
  --gl-z-popover:  1300;
  --gl-z-toast:    1400;
}

/* -------------------------------------------------------------------------
   Layout — dashboard grid
   ------------------------------------------------------------------------- */
:root {
  --gl-sidebar-w:        260px;
  --gl-sidebar-w-collapsed: 72px;
  --gl-topbar-h:         60px;
  --gl-content-max:      1440px;
  --gl-content-gutter:   24px;
  --gl-row-h:            44px;       /* default table row */
  --gl-row-h-compact:    36px;
  --gl-row-h-comfortable:52px;
}

/* -------------------------------------------------------------------------
   Base reset (optional — Claude Code can drop this if a reset is already in
   the stack)
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--gl-bg-app);
  color: var(--gl-text-primary);
  font-family: var(--gl-font-body);
  font-size: var(--gl-text-base);
  line-height: var(--gl-leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular numerals everywhere data lives */
table, .gl-numeric, .gl-kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}