/* ================================================================
   Lognow AI — brand layer (layer 2)

   Load order on every page:
     1. /assets/shared/base-tokens.css   spacing, radii, layout, semantic names
     2. /assets/brand.css                this file
     3. /assets/site.css                 base and component rules

   This file holds the Lognow AI brand values — palette, fonts, nav height —
   and maps them onto the semantic names from base-tokens.css, for the dark
   and the light theme. Tokens only, no rules. Hex values exist only here.

   Structure: CoreAI-compatible naming convention
   Values: Lognow brand (from brand PDF)

   Theming tiers (future tenant/solution theming):
   - standard:    --color-brand-primary, --logo-url
   - advanced:    + --color-brand-secondary, --font-brand
   - white-label: + injected customCss

   Sync note: Token names align with coreai-platform/apps/core-web/src/styles/tokens.css
   Values differ — Lognow website uses different brand palette than CoreAI platform UI.
   ================================================================ */

/* ----------------------------------------------------------------
   Tenant / Solution tier hooks — overridable at runtime
   ---------------------------------------------------------------- */
:root {
  --color-brand-primary:   #5da7fe;    /* Lognow signature blue */
  --color-brand-secondary: #000230;    /* Near-black navy */
  --logo-url:              none;
  --font-brand:            var(--font-family-base);
}

/* ----------------------------------------------------------------
   Primitive palette — fixed Lognow brand colors
   ---------------------------------------------------------------- */
:root {
  /* Navy scale */
  --color-navy-950: #000230;   /* near-black — brand primary dark */
  --color-navy-900: #0a1447;
  --color-navy-700: #15205f;
  --color-navy-500: #3a4d6f;
  --color-navy-300: #5f7195;
  --color-navy-100: #8fa0bc;

  /* Blue scale — Lognow signature blue */
  --color-blue-700: #1f5ed1;   /* AA contrast on light */
  --color-blue-600: #5da7fe;   /* signature blue */
  --color-blue-200: #c5deff;   /* soft tint */
  --color-blue-100: rgba(93, 167, 254, 0.34);   /* glow */

  /* Paper / off-white */
  --color-paper-100: #f5f5f6;
  --color-paper-200: #f8fbff;
  --color-paper-300: #cce3ff;

  /* Status */
  --color-warn-600:  #ff6b4a;
  --color-green-600: #22C55E;
  --color-green-100: #DCFCE7;

  /* Always */
  --color-white: #FFFFFF;
  --color-black: #000000;
}

/* ----------------------------------------------------------------
   Typography
   ---------------------------------------------------------------- */
:root {
  --font-family-base:    "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Legacy aliases */
  --font-display: var(--font-family-display);
  --font-sans:    var(--font-family-base);
  --font-mono:    var(--font-family-mono);
}

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
:root {
  /* Height of the injected nav bar. #nav-mount reserves it and .nav-inner is
     pinned to it, so the placeholder and the real bar cannot drift apart.
     Without this the page jumped ~78px downwards the moment the nav appeared,
     because partials.js mounts it only after assets/i18n.json has loaded. */
  --nav-height: 78px;
}

/* ----------------------------------------------------------------
   Semantic tokens — DARK theme (default)
   ---------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --color-bg:          var(--color-navy-950);   /* --bg */
  --color-bg-elevated: rgba(255, 255, 255, 0.03);
  --color-bg-hover:    rgba(255, 255, 255, 0.06);
  --color-bg-topbar:   color-mix(in oklab, var(--color-navy-950) 75%, transparent);

  /* Text */
  --color-text:        #eef1f5;
  --color-text-muted:  #b8bfcd;
  --color-text-subtle: var(--color-navy-100);

  /* Borders */
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* Brand */
  --color-accent:      var(--color-blue-600);
  --color-accent-soft: var(--color-blue-100);
  --color-accent-2:    var(--color-blue-200);

  /* Status */
  --color-warn:  var(--color-warn-600);

  /* Legacy aliases — keep for backward compat */
  --bg:          var(--color-bg);
  --fg:          var(--color-text);
  --fg-dim:      var(--color-text-muted);
  --card:        var(--color-bg-elevated);
  --card-hover:  var(--color-bg-hover);
  --line:        var(--color-border);
  --line-strong: var(--color-border-strong);
  --muted:       var(--color-navy-100);
  --muted-2:     var(--color-navy-300);
  --accent:      var(--color-accent);
  --accent-2:    var(--color-accent-2);
  --accent-glow: var(--color-accent-soft);
  --ai:          var(--color-accent);
  --ai-glow:     var(--color-accent-soft);
  --sap:         var(--color-accent);
  --ink:         var(--color-navy-950);
  --paper:       var(--color-paper-100);

  /* Semantic names from base-tokens.css. They point at the --color-* tokens,
     which the light theme redefines on the same element, so they follow the
     theme without being repeated below. */
  --surface:          var(--color-bg-elevated);
  --text:             var(--color-text);
  --text-muted:       var(--color-text-muted);
  --primary:          var(--color-accent);
  --primary-contrast: var(--color-navy-950);
  --border:           var(--color-border);
}

/* ----------------------------------------------------------------
   Semantic tokens — LIGHT theme
   ---------------------------------------------------------------- */
:root[data-theme="light"] {
  --color-bg:          var(--color-paper-100);
  --color-bg-elevated: rgba(0, 2, 48, 0.03);
  --color-bg-hover:    rgba(0, 2, 48, 0.06);
  --color-bg-topbar:   color-mix(in oklab, var(--color-paper-100) 75%, transparent);

  --color-text:        var(--color-navy-950);
  --color-text-muted:  var(--color-navy-300);
  --color-text-subtle: var(--color-navy-500);

  --color-border:        rgba(0, 2, 48, 0.12);
  --color-border-strong: rgba(0, 2, 48, 0.22);

  --color-accent:      var(--color-blue-700);   /* darker for AA contrast */
  --color-accent-soft: rgba(31, 94, 209, 0.22);
  --color-accent-2:    var(--color-blue-600);

  /* The signature orange reaches only ~2.9:1 on the light background, which
     fails AA for body text. Darkened towards the brand navy rather than
     introducing a second orange, so the palette stays derivable. */
  --color-warn:        color-mix(in oklab, var(--color-warn-600) 76%, var(--color-navy-950));

  /* Legacy aliases */
  --bg:          var(--color-bg);
  --fg:          var(--color-text);
  --fg-dim:      var(--color-text-muted);
  --card:        var(--color-bg-elevated);
  --card-hover:  var(--color-bg-hover);
  --line:        var(--color-border);
  --line-strong: var(--color-border-strong);
  --muted:       var(--color-navy-300);
  --muted-2:     var(--color-navy-500);
  --accent:      var(--color-accent);
  --accent-2:    var(--color-accent-2);
  --accent-glow: var(--color-accent-soft);
  --ai:          var(--color-accent);
  --ai-glow:     var(--color-accent-soft);
  --sap:         var(--color-accent);
}