:root {
  /* Typography */
  --sans:    'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: 'Noto Sans', var(--sans);

  /* Backgrounds */
  --bg:          #F5F7FA;   /* secondary background */
  --surface:     #FFFFFF;   /* primary background   */
  --card:        #FFFFFF;
  --card2:       #EEF1F6;   /* tertiary background  */
  --inverted-bg: #1A2638;   /* inverted background  */

  /* Borders */
  --border:      rgba(171, 184, 195, 0.70);  /* primary borders  70% */
  --border-soft: rgba(171, 184, 195, 0.30);  /* subtle borders   30% */
  --border-focus: #00D084;                   /* focus borders        */

  /* Text */
  --text:  #1A2638;   /* primary text   */
  --dim:   #5A6B7A;   /* secondary text */
  --off:   #8A96A3;   /* muted text     */

  /* Accent */
  --acc:      #00D084;                                    /* primary accent   */
  --acc2:     #439DB5;                                    /* secondary accent */
  --acc-s:    rgba(0, 208, 132, 0.10);
  --acc-soft: rgba(0, 208, 132, 0.12);
  --acc-grad: linear-gradient(135deg, #00D084 0%, #00B374 100%);

  /* Shadows — keyed to navy */
  --shadow-sm: 0 1px 2px 0 rgba(26, 38, 56, 0.06);
  --shadow:    0 4px 8px -2px rgba(26, 38, 56, 0.10), 0 2px 4px -1px rgba(26, 38, 56, 0.06);
  --shadow-md: 0 10px 20px -4px rgba(26, 38, 56, 0.12), 0 4px 8px -2px rgba(26, 38, 56, 0.06);
  --shadow-lg: 0 20px 32px -6px rgba(26, 38, 56, 0.12), 0 8px 12px -4px rgba(26, 38, 56, 0.06);

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Status */
  --green:       #00D084;
  --green-soft:  rgba(0, 208, 132, 0.10);
  --amber:       #D97706;
  --amber-soft:  rgba(217, 119, 6, 0.10);
  --red:         #E53E3E;
  --red-soft:    rgba(229, 62, 62, 0.10);
  --blue:        #439DB5;
  --blue-soft:   rgba(67, 157, 181, 0.10);
}

/* Mode accent overrides — stay within brand palette */
[data-mode="website"] {
  --acc:      #00D084;
  --acc-s:    rgba(0, 208, 132, 0.10);
  --acc-soft: rgba(0, 208, 132, 0.12);
  --acc-grad: linear-gradient(135deg, #00D084 0%, #00B374 100%);
}

[data-mode="gmb"] {
  --acc:      #439DB5;
  --acc-s:    rgba(67, 157, 181, 0.10);
  --acc-soft: rgba(67, 157, 181, 0.12);
  --acc-grad: linear-gradient(135deg, #439DB5 0%, #2D849C 100%);
}

[data-mode="social"] {
  --acc:      #1A2638;
  --acc-s:    rgba(26, 38, 56, 0.08);
  --acc-soft: rgba(26, 38, 56, 0.10);
  --acc-grad: linear-gradient(135deg, #2A3C52 0%, #1A2638 100%);
}

/* Global Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; transition: all 0.2s; }
button { font-family: inherit; }