/* Theme: lynäar (Lynäar Family)
   Derived from: https://linear.app/ (canonical source)
   Family: lynaear | Theme ID: lynäar (ä = umlauted)
   Derivation: source → canonical-linear (basis variant, unmodified)
   Status: active | IP Gate: passed
   
   Intent: Primary brand theme for Lynäar documentation.
           Subtle, refined color palette derived orthogonally from Linear.app.
*/

@import url('../../../b2b/solution-provider/assets/style.css');

:root,
[data-theme="light"] {
  /* ========== LIGHT MODE ========== */
  
  /* COLORS: Lynäar Base Palette (subtle Linear derivation) */
  --color-navy:        #1d2440;
  --color-blue-dark:   #2d3d73;
  --color-blue-mid:    #4258a3;
  --color-blue-light:  #6a86d6;
  --color-accent:      #4258a3;

  /* BACKGROUNDS */
  --iio-bg:            #f7f9fc;
  --iio-bg-subtle:     #fafbfd;
  --iio-bg-raised:     #ffffff;
  --iio-bg-sunken:     #eff2f8;

  /* SURFACES / PANELS */
  --iio-surface:       #ffffff;
  --iio-surface-soft:  #fafbfd;
  --iio-surface-mid:   #eff2f8;

  /* TYPOGRAPHY */
  --iio-ink:           #1a1d22;
  --iio-ink-soft:      #2d3340;
  --iio-muted:         #5e6577;
  --iio-muted-light:   #8896ab;
  --iio-on-accent:     #ffffff;

  /* LINES / BORDERS */
  --iio-line:          #d1d8e0;
  --iio-line-strong:   #b2bcd0;
  --iio-line-subtle:   #e3e9f1;

  /* ACCENT / BRAND (Lynäar Blue, deeper than Linear) */
  --iio-accent:        #4258a3;
  --iio-accent-mid:    #6a86d6;
  --iio-accent-light:  #e6ecff;
  --iio-accent-hover:  #314388;

  /* STATUS INDICATORS */
  --iio-ok:            #2d8a59;
  --iio-ok-bg:         #ddf5ea;
  --iio-ok-line:       #87d4a0;
  --iio-warn:          #c67f1a;
  --iio-warn-bg:       #fef4e0;
  --iio-warn-line:     #f5d075;
  --iio-risk:          #c44b4b;
  --iio-risk-bg:       #fde8e8;
  --iio-risk-line:     #f0a8a8;
  --iio-info:          #0070c9;
  --iio-info-bg:       #e3f2ff;
  --iio-info-line:     #84d4ff;

  /* GATE CHIPS (semantic) */
  --iio-gate-all-bg:          #ddf5ea;
  --iio-gate-all-line:        #87d4a0;
  --iio-gate-all-ink:         #1a4b30;
  --iio-gate-boundary-bg:     #fef4e0;
  --iio-gate-boundary-line:   #f5d075;
  --iio-gate-boundary-ink:    #6b3d0f;
  --iio-gate-txn-bg:          #e3f2ff;
  --iio-gate-txn-line:        #84d4ff;
  --iio-gate-txn-ink:         #072f6e;
  --iio-gate-story-bg:        #f4e8ff;
  --iio-gate-story-line:      #dab4fe;
  --iio-gate-story-ink:       #4a2460;
  --iio-gate-role-bg:         #fde8f5;
  --iio-gate-role-line:       #f5a3e0;
  --iio-gate-role-ink:        #681e5c;
  --iio-gate-unknown-bg:      #f0f3f8;
  --iio-gate-unknown-line:    #d3dce8;
  --iio-gate-unknown-ink:     #3f4c63;

  /* TYPOGRAPHY */
  --iio-font-base:    "Segoe UI", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --iio-font-mono:    "IBM Plex Mono", "Consolas", "Liberation Mono", monospace;
  --iio-font-size:    14px;
  --iio-line-height:  1.6;

  /* RADII */
  --iio-r-sm:   4px;
  --iio-r-md:   8px;
  --iio-r-lg:   12px;
  --iio-r-xl:   16px;
  --iio-r-pill: 999px;

  /* SHADOWS */
  --iio-shadow-sm:  0 1px 3px rgba(20, 37, 58, 0.08);
  --iio-shadow-md:  0 4px 12px rgba(20, 37, 58, 0.10);
  --iio-shadow-lg:  0 8px 24px rgba(20, 37, 58, 0.12);

  /* SPACING */
  --iio-sp-xs:  4px;
  --iio-sp-sm:  8px;
  --iio-sp-md:  16px;
  --iio-sp-lg:  24px;
  --iio-sp-xl:  32px;
  --iio-sp-2xl: 48px;

  /* SHELL-SPECIFIC */
  --iio-h-bg:    #f8fafd;
  --iio-h-ink:   #1a1d22;
  --iio-h-muted: #5e6577;
  --iio-h-line:  #d1d8e0;

  /* CODE BLOCKS */
  --iio-code-bg:   #eff2f8;
  --iio-code-ink:  #1a1d22;
  --iio-pre-bg:    #f7f9fc;
  --iio-pre-line:  #d1d8e0;

  /* TABLES */
  --iio-thead-bg:  #f5f7fb;
  --iio-tr-hover:  #fafbfd;
  --iio-tr-active: #eff2f8;

  /* TABS */
  --iio-tab-bg:         #f5f7fb;
  --iio-tab-active-bg:  #eef0f8;
  --iio-tab-active-ink: #4258a3;
}

/* ========== DARK MODE ========== */
/* Dark mode: explicit selection (overrides base CSS dark mode) */
    /* BACKGROUNDS */
    --iio-bg:            #0f1419;
    --iio-bg-subtle:     #151b26;
    --iio-bg-raised:     #1c2333;
    --iio-bg-sunken:     #0a0d12;

    /* SURFACES */
    --iio-surface:       #1c2333;
    --iio-surface-soft:  #252d42;
    --iio-surface-mid:   #2e3851;

    /* TYPOGRAPHY */
    --iio-ink:           #f0f1f5;
    --iio-ink-soft:      #d9dde5;
    --iio-muted:         #9ba4b5;
    --iio-muted-light:   #6f7a8a;
    --iio-on-accent:     #ffffff;

    /* LINES */
    --iio-line:          #364256;
    --iio-line-strong:   #4a5368;
    --iio-line-subtle:   #242d40;

    /* ACCENT */
    --iio-accent:        #6a86d6;
    --iio-accent-mid:    #8a9be0;
    --iio-accent-light:  #1a2240;
    --iio-accent-hover:  #5973c8;

    /* STATUS */
    --iio-ok:            #5eb681;
    --iio-ok-bg:         #1a3a28;
    --iio-ok-line:       #2d7a52;
    --iio-warn:          #f5a623;
    --iio-warn-bg:       #3a2a0a;
    --iio-warn-line:     #6b4f1a;
    --iio-risk:          #f87878;
    --iio-risk-bg:       #3a1a1a;
    --iio-risk-line:     #7a3a3a;
    --iio-info:          #5eb4f5;
    --iio-info-bg:       #1a3a5a;
    --iio-info-line:     #2d6a9a;

    /* GATES */
    --iio-gate-all-bg:          #1a3a28;
    --iio-gate-all-line:        #2d7a52;
    --iio-gate-all-ink:         #5eb681;
    --iio-gate-boundary-bg:     #3a2a0a;
    --iio-gate-boundary-line:   #6b4f1a;
    --iio-gate-boundary-ink:    #f5d075;
    --iio-gate-txn-bg:          #1a3a5a;
    --iio-gate-txn-line:        #2d6a9a;
    --iio-gate-txn-ink:         #5eb4f5;
    --iio-gate-story-bg:        #2a1a3a;
    --iio-gate-story-line:      #5a3a7a;
    --iio-gate-story-ink:       #c4b5fd;
    --iio-gate-role-bg:         #3a1a3a;
    --iio-gate-role-line:       #6a2a6a;
    --iio-gate-role-ink:        #f0abfc;
    --iio-gate-unknown-bg:      #1e2a38;
    --iio-gate-unknown-line:    #3a4a62;
    --iio-gate-unknown-ink:     #9ba4b5;

    /* CODE */
    --iio-code-bg:   #151b26;
    --iio-code-ink:  #d9dde5;
    --iio-pre-bg:    #0f1419;
    --iio-pre-line:  #364256;

    /* TABLES */
    --iio-thead-bg:  #252d42;
    --iio-tr-hover:  #2e3851;
    --iio-tr-active: #364256;

    /* TABS */
    --iio-tab-bg:         #252d42;
    --iio-tab-active-bg:  #2f3a52;
    --iio-tab-active-ink: #6a86d6;

    /* SHELL */
    --iio-h-bg:    #151b26;
    --iio-h-ink:   #f0f1f5;
    --iio-h-muted: #9ba4b5;
    --iio-h-line:  #364256;
  }
}

/* Dark mode: explicit selection (overrides OS preference) */
[data-theme="dark"] {
  /* BACKGROUNDS */
  --iio-bg:            #0f1419;
  --iio-bg-subtle:     #151b26;
  --iio-bg-raised:     #1c2333;
  --iio-bg-sunken:     #0a0d14;

  /* SURFACES */
  --iio-surface:       #1c2333;
  --iio-surface-soft:  #252d3a;
  --iio-surface-mid:   #2d353f;

  /* TYPOGRAPHY */
  --iio-ink:           #e8eef5;
  --iio-ink-soft:      #d0d8e0;
  --iio-muted:         #96a1b0;
  --iio-muted-light:   #6f7a8a;
  --iio-on-accent:     #ffffff;

  /* LINES */
  --iio-line:          #383f4c;
  --iio-line-strong:   #4a5361;
  --iio-line-subtle:   #2d3541;

  /* ACCENT (Lynäar refined, inverted) */
  --iio-accent:        #7b8fb5;
  --iio-accent-mid:    #8fa3c8;
  --iio-accent-light:  #2d3550;
  --iio-accent-hover:  #9fb3d1;

  /* STATUS */
  --iio-ok:            #5dbb7f;
  --iio-ok-bg:         #1c3d2c;
  --iio-ok-line:       #3f6e55;
  --iio-warn:          #f5b840;
  --iio-warn-bg:       #4a3a0f;
  --iio-warn-line:     #8a7028;
  --iio-risk:          #f57c7c;
  --iio-risk-bg:       #4a1f1f;
  --iio-risk-line:     #8a4a4a;
  --iio-info:          #6cb3ff;
  --iio-info-bg:       #1a3d5c;
  --iio-info-line:     #3d6b99;

  /* GATES */
  --iio-gate-all-bg:          #1c3d2c;
  --iio-gate-all-line:        #3f6e55;
  --iio-gate-all-ink:         #b3e8ce;
  --iio-gate-boundary-bg:     #4a3a0f;
  --iio-gate-boundary-line:   #8a7028;
  --iio-gate-boundary-ink:    #f5d075;
  --iio-gate-txn-bg:          #1a3d5c;
  --iio-gate-txn-line:        #3d6b99;
  --iio-gate-txn-ink:         #87d4ff;
  --iio-gate-story-bg:        #3d1f5c;
  --iio-gate-story-line:      #6b4a99;
  --iio-gate-story-ink:       #d8b4fe;
  --iio-gate-role-bg:         #4a1f3d;
  --iio-gate-role-line:       #8a4a7c;
  --iio-gate-role-ink:        #f5a3e0;
  --iio-gate-unknown-bg:      #2d323d;
  --iio-gate-unknown-line:    #4a5263;
  --iio-gate-unknown-ink:     #c5d1e5;

  /* CODE */
  --iio-code-bg:   #1f2530;
  --iio-code-ink:  #dce2e8;
  --iio-pre-bg:    #17191f;
  --iio-pre-line:  #3d4452;

  /* TABLES */
  --iio-thead-bg:  #252d3a;
  --iio-tr-hover:  #2d3541;
  --iio-tr-active: #353d4a;

  /* TABS */
  --iio-tab-bg:         #1f2632;
  --iio-tab-active-bg:  #2a3140;
  --iio-tab-active-ink: #7b8fb5;

  /* SHELL */
  --iio-h-bg:    #151b26;
  --iio-h-ink:   #f0f1f5;
  --iio-h-muted: #9ba4b5;
  --iio-h-line:  #364256;
}

/* ═══ PORTAL BRIDGE ═══════════════════════════════════════════════════
   Maps --iio-* tokens to portal CSS vars (--accent, --bg etc.)
   This makes the theme work in the IIO Portal without JS.
   ════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --accent:        var(--iio-accent);
  --accent-fg:     var(--iio-on-accent, #ffffff);
  --tenant-accent: var(--iio-accent);
  --bg:            var(--iio-bg);
  --surface:       var(--iio-surface);
  --surface-2:     var(--iio-surface-soft, var(--iio-surface));
  --text:          var(--iio-ink);
  --text-1:        var(--iio-ink);
  --text-2:        var(--iio-muted);
  --text-3:        var(--iio-muted-light, var(--iio-muted));
  --border:        var(--iio-line);
  --border-hover:  var(--iio-line-strong, var(--iio-line));
  --green:         var(--iio-ok);
  --amber:         var(--iio-warn);
  --red:           var(--iio-risk);
}