/* landing-overrides.css
   ----------------------------------------------------------------
   Scroll-simulation landing page.
   Palette per user request:
     - Peacock blue (primary)
     - Orange (accent)
     - Pure white surfaces (light mode)
   Dark mode uses a different palette (deep ink + brightened brand).
   ---------------------------------------------------------------- */

body.lokara {
  /* Pure white surfaces */
  --bg:           #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    #F7F7F8;
  --bg-inverse:   #0A1416;

  /* Cool-leaning neutral ramp (not warm) */
  --fg-1: #0A1416;
  --fg-2: #2E3A3D;
  --fg-3: #6B7679;
  --fg-4: #A6AEB1;

  --border-1: #ECECEE;
  --border-2: #D9DBDD;
  --border-strong: #0A1416;

  /* PRIMARY - peacock blue */
  --accent:         #0F7A87;
  --accent-deep:    #095964;
  --accent-soft:    #B8DDE2;
  --accent-wash:    #E6F2F3;
  --accent-fg:      #FFFFFF;
  --accent-soft-bg: #E6F2F3;
  --accent-soft-fg: #095964;

  /* SECONDARY - orange (warm) */
  --brand-peacock:      #F26B2C;        /* aliasing legacy var to orange so existing components inherit */
  --brand-peacock-deep: #C24F18;
  --brand-peacock-soft: #FAD2BB;
  --brand-peacock-wash: #FDEBDF;

  --accent-2:           #F26B2C;
  --accent-2-deep:      #C24F18;
  --accent-2-fg:        #FFFFFF;
  --accent-2-soft-bg:   #FDEBDF;
  --accent-2-soft-fg:   #C24F18;

  /* Soft cool shadows */
  --shadow-xs: 0 1px 0 rgba(10, 20, 22, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 20, 22, 0.05);
  --shadow-md: 0 6px 18px rgba(10, 20, 22, 0.07);
  --shadow-lg: 0 18px 44px rgba(10, 20, 22, 0.10);
  --shadow-xl: 0 28px 72px rgba(10, 20, 22, 0.14);
  --shadow-focus: 0 0 0 3px rgba(15, 122, 135, 0.28);

  background: var(--bg);
}

/* Dark mode - different palette set:
   deep ink background, brightened peacock teal, warmer orange. */
body.lokara[data-theme="dark"] {
  --bg:           #0A1416;
  --bg-elevated:  #111E21;
  --bg-sunken:    #07101 1;
  --bg-sunken:    #060D0F;
  --bg-inverse:   #FFFFFF;

  --fg-1: #F1F5F6;
  --fg-2: #C7D0D2;
  --fg-3: #8A969A;
  --fg-4: #5A6669;

  --border-1: #1B2A2D;
  --border-2: #29393D;
  --border-strong: #F1F5F6;

  --accent:         #3FC2CF;   /* brighter peacock for dark bg */
  --accent-deep:    #5BD5E2;
  --accent-soft-bg: rgba(63, 194, 207, 0.14);
  --accent-soft-fg: #7DD9E2;

  --brand-peacock:      #FF8A4C;       /* warmer orange for dark */
  --brand-peacock-deep: #FFA478;
  --brand-peacock-soft: rgba(255, 138, 76, 0.18);
  --brand-peacock-wash: rgba(255, 138, 76, 0.10);

  --accent-2:           #FF8A4C;
  --accent-2-deep:      #FFA478;
  --accent-2-soft-bg:   rgba(255, 138, 76, 0.14);
  --accent-2-soft-fg:   #FFB48E;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.7);
  --shadow-focus: 0 0 0 3px rgba(63, 194, 207, 0.32);

  background: var(--bg);
}

nav[data-marketing-nav] {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid var(--border-1) !important;
}
body.lokara[data-theme="dark"] nav[data-marketing-nav] {
  background: rgba(10, 20, 22, 0.72) !important;
  border-bottom: 1px solid var(--border-1) !important;
}

::selection { background: var(--accent); color: #fff; }