/*
 * theme_member_v1.0.0.css — member portal theme (eKomas). Owned by /build-theme.
 * Conforms to the LOCKED CANONICAL SCHEMA v1.1: 126 tokens, 19 sections, template order.
 *
 * Changelog:
 * v1.0.0 - 2026-10-10 - (in place, before any consumer) +2 extension tokens for the app-window demo
 *   (Solutions / AI Engineering): --ek-icon-off (step-rail radio), --ek-fs-72 (QR glyph); and two glows,
 *   --ek-glow-flow (sticky step icon) and --ek-glow-story (About timeline's last dot).
 * v1.0.0 - 2026-10-10 - (in place, before any consumer) +5 extension tokens for the Home build: hero canvas
 *   streak/ribbon colours, the active-step glow, a 6px frame radius.
 * v1.0.0 - 2026-10-10 - (in place, before any consumer) extension grows: --ek-fs-* type scale (19 fixed +
 *   25 fluid clamp sizes), --ek-radius-* (10), shadows/rings/glows (15), --ek-font-icon. Every value is one
 *   the design draws and no canonical slot holds; the chrome/page skills' LAW 1 requires a token for
 *   each font size, radius and shadow, not only colours.
 * v1.0.0 - 2026-10-10 - (in place, before any consumer) eKomas EXTENSION block appended: 48
 *   non-canonical --ek-* tokens mirroring design values no canonical slot owns (owner chose an
 *   extension block over a catalog Refactor). Canonical 126 unchanged, same order.
 * v1.0.0 - 2026-10-10 - Bootstrap. eKomas brand from the Claude Design export "Ekomas website
 *   design" (Home O / About Us / Solution O / AI Engineering / Careers / Contact .dc.html). Values
 *   read from the pages' inline styles, frequency-ranked: ink #141414, brand red #c4252b, greys
 *   #3d3d3d / #6b6b6b, surfaces #f4f4f4 / #fafafa, hairlines rgba(20,20,20,.08-.14), 4px buttons,
 *   6px inputs, 10px cards, Schibsted Grotesk + Geist Mono, weights 500/600 (bold slot = 600).
 *   Replaces the GoTasty theme_v1.0.2.css for pages rebuilt from this design; theme_v1.0.2.css
 *   stays until Privacy / Terms / 404 / blog are re-skinned (then /build-theme Cleanup).
 *   Fonts are LOADED by head_v* (chrome), not here — this file only names them.
 *   Listing section has no consumer on this information site; neutral eKomas values.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
   * 1. Brand colors                                              [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-color: #141414;
  --secondary-color: #0d0d0d;
  --tertiary-color: #3d3d3d;
  --fourth-color: #2a2a2a;
  --fifth-color: #f4f4f4;
  --sixth-color: #fafafa;
  --accent-color: #c4252b;
  --accent-soft-color: #f9e9ea;  /* v1.1 — for focus rings, alert bg, soft hover */

  /* ═══════════════════════════════════════════════════════════════════════
   * 2. Status colors                                       [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --error-color: #c4252b;
  --warning-color: #ffe139;
  --success-color: #2f7a48;
  --info-color: #3B82F6;          /* v1.1 — for "Processing" pills, info messages */
  --orange-color: #F97316;        /* v1.1 — for tag/badge variants */
  --purple-color: #c79bff;        /* v1.1 — for tag/badge variants */
  --hyperlink-text-color: #141414;

  /* ═══════════════════════════════════════════════════════════════════════
   * 3. Background colors                                   [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-bg-color: #ffffff;
  --default-primary-bg-color: #141414;
  --default-secondary-bg-color: #ffffff;
  --primary-bg-color: #ffffff;
  --secondary-bg-color: #f4f4f4;

  /* ═══════════════════════════════════════════════════════════════════════
   * 4. Text colors                                              [BRAND]
   * Convention: primary = body text, accent = brand highlight
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-text-color: #141414;
  --secondary-text-color: #3d3d3d;
  --tertiary-text-color: #6b6b6b;
  --inverse-text-color: #ffffff;
  --accent-text-color: #c4252b;
  --hover-text-color: #c4252b;
  --default-primary-text-color: #141414;
  --default-secondary-text-color: #ffffff;

  /* ═══════════════════════════════════════════════════════════════════════
   * 5. Borders                                             [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-border: 1px solid rgba(20, 20, 20, 0.1);
  --primary-border-color: rgba(20, 20, 20, 0.1);
  --secondary-border-color: rgba(20, 20, 20, 0.08);  /* v1.1 — softer border for table cells, dividers */
  --default-border-radius: 4px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 6. Border radius scale                                 [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --border-radius-xs: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;  /* v1.1 — for pills, status badges, profile chip */

  /* ═══════════════════════════════════════════════════════════════════════
   * 7. Text size scale                                     [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --xl-text-size: clamp(36px, 4.6vw, 64px);
  --lg-text-size: 20px;
  --md-text-size: 18px;
  --sm-text-size: 15px;
  --xs-text-size: 12px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 8. Font weight                                         [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-font-weight-thin: 300;
  --default-font-weight-medium: 400;
  --default-font-weight-thick: 500;
  --default-font-weight-bold: 600;
  --default-font-weight-max: 900;

  /* ═══════════════════════════════════════════════════════════════════════
   * 9. Font family                                         [STRUCTURAL]
   * v1.1 — Tailwind utilities: font-sans, font-display, font-mono
   * ═════════════════════════════════════════════════════════════════════ */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ═══════════════════════════════════════════════════════════════════════
   * 10. Shadow                                             [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-md: 0 24px 48px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 30px 70px rgba(20, 20, 20, 0.14);

  /* ═══════════════════════════════════════════════════════════════════════
   * 11. Z-index scale                                      [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ═══════════════════════════════════════════════════════════════════════
   * 12. Header                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --header-height: 68px;
  --js-header-height: 68px;
  --header-bg-color: rgba(255, 255, 255, 0.88);
  --header-text-size: 14.5px;
  --header-text-color: #3d3d3d;
  --header-hover-color: var(--accent-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 13. Footer                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --footer-bg-color: #ffffff;
  --footer-text-size: 14px;
  --footer-text-color: #3d3d3d;
  --footer-hover-color: var(--accent-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 14. Button                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --btn-primary-bg-color: #141414;
  --btn-secondary-bg-color: transparent;
  --btn-tertiary-bg-color: #ffffff;
  --btn-disabled-bg-color: #e2e2e2;
  --btn-primary-hover-bg-color: #c4252b;
  --btn-secondary-hover-bg-color: transparent;
  --btn-tertiary-hover-bg-color: #f4f4f4;
  --btn-primary-text-color: #ffffff;
  --btn-secondary-text-color: #141414;
  --btn-tertiary-text-color: #141414;
  --btn-disabled-text-color: #8a8a8a;
  --btn-primary-hover-text-color: #ffffff;
  --btn-secondary-hover-text-color: #141414;
  --btn-tertiary-hover-text-color: #141414;
  --btn-width-long: 200px;
  --btn-width-short: 100px;
  --btn-border-radius: 4px;
  --btn-border: 1px solid rgba(20, 20, 20, 0.2);
  --btn-font-size: 15px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 15. Input                                              [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --input-label-size: 14px;
  --input-text-size: 15.5px;
  --input-border-radius: 6px;
  --input-border: 1px solid rgba(20, 20, 20, 0.14);
  --input-bg-color: #ffffff;
  --input-width-long: 100%;
  --input-width-short: 200px;
  --input-placeholder-size: 15.5px;
  --input-placeholder-color: #8a8a8a;
  --input-disabled-bg-color: #f4f4f4;
  --input-focus-border-color: var(--primary-color);
  --input-error-border-color: var(--error-color);
  --input-error-text-color: var(--error-color);
  --input-success-border-color: var(--success-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 16. Listing                                                 [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --listing-header-bg-color: #f4f4f4;
  --listing-header-text-color: #141414;
  --listing-row-primary-color: #fafafa;
  --listing-row-secondary-color: #ffffff;
  --listing-row-child-primary-color: #f4f4f4;
  --listing-row-child-secondary-color: #f4f4f4;
  --listing-header-text-size: 14px;
  --listing-row-text-size: 15px;
  --listing-header-child-text-size: 14px;
  --listing-row-child-text-size: 15px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 17. Card                                               [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --card-bg-color: #ffffff;
  --card-border-color: var(--primary-border-color);
  --card-border-radius: 10px;
  --card-shadow: var(--shadow-md);
  --card-padding: 24px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 18. Modal                                              [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --modal-overlay-color: rgba(20, 20, 20, 0.55);
  --modal-bg-color: #ffffff;
  --modal-border-radius: var(--border-radius-lg);
  --modal-shadow: var(--shadow-lg);

  /* ═══════════════════════════════════════════════════════════════════════
   * 19. Tabs                                                    [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --tab-active-bg-color: var(--primary-color);
  --tab-active-text-color: #ffffff;
  --tab-inactive-bg-color: transparent;
  --tab-inactive-text-color: var(--primary-text-color);
  --tab-border-color: var(--primary-border-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * eKomas EXTENSION — NON-CANONICAL, prefix --ek-*                 [BRAND]
   * Added 2026-10-10 (owner decision: extension block, NOT a catalog Refactor —
   * the canonical template stays at 126 tokens for every other project/portal).
   * Every token MIRRORS a value the "Ekomas website design" export uses that no
   * canonical slot owns: text tones the canon text slots (3) cannot all hold,
   * on-dark text, extra surfaces, accent shades, and the palettes the design's
   * canvas art draws with (RAMP constant, 3D block faces, scrims, glows).
   * Translucent variants are NOT tokens: write color-mix(in srgb, var(--x) N%,
   * transparent) at the use site. Values are the design's, exactly.
   * ═════════════════════════════════════════════════════════════════════ */
  /* Text on light surfaces — the canon has primary/secondary/tertiary only */
  --ek-text-faint: #8a8a8a;        /* Geist Mono eyebrows, column labels, copyright bar */
  --ek-text-muted: #5c5c5c;        /* footer tagline, captions */
  --ek-text-body-soft: #4a4a4a;    /* footer address block, soft body paragraphs */
  --ek-text-dim: #777777;          /* Home secondary meta text */
  --ek-text-tab-off: #7a7a7a;      /* inactive pill / tab label */
  --ek-text-step-off: #9a9a9a;     /* inactive step label */
  --ek-text-icon-soft: #a8a8a8;    /* close / dismiss icon glyph */
  /* Text on dark surfaces */
  --ek-on-dark-text: #e6e6e6;
  --ek-on-dark-text-soft: #cfcfcf;
  --ek-on-dark-text-muted: #bdbdbd;
  --ek-on-dark-text-warm: #f4f1ee;
  /* Surfaces */
  --ek-surface-card: #f6f6f6;      /* light feature cards */
  --ek-surface-soft: #f0f0f0;      /* mock-UI rows */
  --ek-surface-chip: #ececec;      /* muted button / chip fill */
  --ek-surface-dark-raised: #151515; /* cards on dark bands */
  --ek-surface-darkest: #0e0e0e;   /* darkest section band */
  --ek-surface-purple-dark: #1a1430; /* solution-row art background */
  --ek-black: #000000;
  /* Accent shades — the canon has one accent + one soft */
  --ek-accent-light: #ff5a5f;      /* red eyebrows / rules on dark bands */
  --ek-accent-lighter: #ff8a8d;    /* step numbers on dark */
  --ek-accent-dark: #9c1a20;       /* hot 3D-block left face */
  --ek-accent-darker: #7e151a;     /* hot 3D-block right face */
  --ek-accent-glow: #e02832;       /* particle glow (used with alpha) */
  --ek-success-light: #8fd19e;     /* success tone on dark */
  --ek-success-lighter: #9fd3ad;   /* live indicator on dark */
  --ek-purple-deep: #7a3cc4;       /* light-mode pair of --purple-color */
  --ek-gold: #d9b44a;              /* mid stop of the score gradient */
  /* Band palette — the design's RAMP constant, in order (footer + section bands) */
  --ek-ramp-1: #f2f2f2;
  --ek-ramp-2: #e2e2e2;
  --ek-ramp-3: #cfcfcf;
  --ek-ramp-4: #b3b3b3;
  --ek-ramp-5: #8f8f8f;
  --ek-ramp-6: #666666;
  --ek-ramp-7: #3a3a3a;
  --ek-ramp-8: #161616;
  /* 3D block / sphere art */
  --ek-art-face-top-dark: #2a2424;
  --ek-art-face-left-light: #ebe8e4;
  --ek-art-face-left-dark: #1c1818;
  --ek-art-face-right-light: #dcd8d3;
  --ek-art-face-right-dark: #151212;
  --ek-art-node-light: #efe9e3;
  --ek-art-shadow-dark: #050404;
  --ek-art-scrim-dark: #0d0a0a;    /* used with alpha */
  --ek-art-panel-dark: #161212;    /* used with alpha */
  --ek-art-glow-orange: #ff783c;   /* used with alpha */
  --ek-art-glow-sun: #ff8c3c;      /* used with alpha */
  --ek-art-glow-peach: #ffc896;    /* used with alpha */
  --ek-art-mist: #ebebeb;          /* used with alpha */
  /* Type scale — every design font size the canon scale (xs 12 / sm 15 / md 18 / lg 20 / xl clamp 36-64)
     does not hold. Named by value so a page cites exactly the size the design draws. */
  --ek-fs-10-5: 10.5px;
  --ek-fs-11: 11px;
  --ek-fs-11-5: 11.5px;
  --ek-fs-12-5: 12.5px;
  --ek-fs-13: 13px;
  --ek-fs-13-5: 13.5px;
  --ek-fs-14: 14px;
  --ek-fs-14-5: 14.5px;
  --ek-fs-15-5: 15.5px;
  --ek-fs-16: 16px;
  --ek-fs-16-5: 16.5px;
  --ek-fs-17: 17px;
  --ek-fs-19: 19px;
  --ek-fs-21: 21px;
  --ek-fs-22: 22px;
  --ek-fs-24: 24px;
  --ek-fs-28: 28px;
  --ek-fs-30: 30px;
  --ek-fs-56: 56px;
  --ek-fs-fluid-16-5-1-3vw-18-5: clamp(16.5px, 1.3vw, 18.5px);
  --ek-fs-fluid-17-1-4vw-19-5: clamp(17px, 1.4vw, 19.5px);
  --ek-fs-fluid-17-1-4vw-20: clamp(17px, 1.4vw, 20px);
  --ek-fs-fluid-18-1-6vw-22: clamp(18px, 1.6vw, 22px);
  --ek-fs-fluid-19-1-6vw-23: clamp(19px, 1.6vw, 23px);
  --ek-fs-fluid-21-1-8vw-26: clamp(21px, 1.8vw, 26px);
  --ek-fs-fluid-22-2-2vw-32: clamp(22px, 2.2vw, 32px);
  --ek-fs-fluid-26-2-4vw-36: clamp(26px, 2.4vw, 36px);
  --ek-fs-fluid-26-2-6vw-40: clamp(26px, 2.6vw, 40px);
  --ek-fs-fluid-28-2-8vw-40: clamp(28px, 2.8vw, 40px);
  --ek-fs-fluid-28-3vw-44: clamp(28px, 3vw, 44px);
  --ek-fs-fluid-28-3-2vw-46: clamp(28px, 3.2vw, 46px);
  --ek-fs-fluid-30-7vw-108: clamp(30px, 7vw, 108px);
  --ek-fs-fluid-32-3-2vw-48: clamp(32px, 3.2vw, 48px);
  --ek-fs-fluid-36-4-8vw-68: clamp(36px, 4.8vw, 68px);
  --ek-fs-fluid-38-5vw-72: clamp(38px, 5vw, 72px);
  --ek-fs-fluid-38-5-4vw-80: clamp(38px, 5.4vw, 80px);
  --ek-fs-fluid-40-4vw-60: clamp(40px, 4vw, 60px);
  --ek-fs-fluid-42-5-8vw-92: clamp(42px, 5.8vw, 92px);
  --ek-fs-fluid-44-6vw-96: clamp(44px, 6vw, 96px);
  --ek-fs-fluid-44-6-2vw-100: clamp(44px, 6.2vw, 100px);
  --ek-fs-fluid-48-6-6vw-108: clamp(48px, 6.6vw, 108px);
  --ek-fs-fluid-52-7vw-112: clamp(52px, 7vw, 112px);
  --ek-fs-fluid-96-14vw-200: clamp(96px, 14vw, 200px);
  --ek-fs-fluid-120-17vw-260: clamp(120px, 17vw, 260px);
  /* Radius — design radii with no canonical rung (xs 4 / md 8 / lg 12 / input 6 / card 10 / full 9999) */
  --ek-radius-2: 2px;
  --ek-radius-3: 3px;
  --ek-radius-5: 5px;
  --ek-radius-7: 7px;
  --ek-radius-9: 9px;
  --ek-radius-14: 14px;
  --ek-radius-16: 16px;
  --ek-radius-20: 20px;
  --ek-radius-pill: 999px;          /* the design's pill value (canon full is 9999px) */
  --ek-radius-circle: 50%;
  /* Shadows, rings and glows (canon: --shadow-md = 0 24px 48px .08, --shadow-lg = 0 30px 70px .14) */
  --ek-shadow-cta: 0 10px 30px rgba(20, 20, 20, 0.18);
  --ek-shadow-panel: 0 30px 80px rgba(20, 20, 20, 0.1);
  --ek-shadow-panel-soft: 0 30px 70px rgba(20, 20, 20, 0.06);
  --ek-shadow-float: 0 24px 60px rgba(20, 20, 20, 0.22);
  --ek-shadow-float-strong: 0 24px 48px rgba(20, 20, 20, 0.18);
  --ek-shadow-deep: 0 40px 90px rgba(0, 0, 0, 0.28);
  --ek-ring-focus: 0 0 0 3px rgba(20, 20, 20, 0.08);      /* input focus */
  --ek-ring-error: 0 0 0 3px rgba(196, 37, 43, 0.3);      /* input error */
  --ek-ring-white: 0 0 0 3px #ffffff;
  --ek-ring-dark: 0 0 0 5px #0d0d0d;
  --ek-ring-accent-soft: 0 0 0 5px rgba(196, 37, 43, 0.15);
  --ek-glow-accent-dot: 0 0 8px #c4252b;
  --ek-glow-accent-light: 0 0 14px rgba(255, 90, 95, 0.6);
  --ek-glow-white-soft: 0 0 12px rgba(255, 255, 255, 0.35);
  --ek-pulse-from: 0 0 0 0 rgba(20, 20, 20, 0.55);       /* kPulse keyframe start */
  --ek-pulse-to: 0 0 0 10px rgba(20, 20, 20, 0);         /* kPulse keyframe end */
  /* Icon font — the design's glyph font (loaded by head_v*, like the text fonts) */
  --ek-font-icon: 'Material Symbols Outlined';
  /* Home build (2026-10-10): hero canvas colours + step glow + a non-input 6px radius */
  --ek-art-streak-hot: #ff5a3c;    /* dark-mode red warp streak (HeroFX SphereOrbit) */
  --ek-art-ribbon-edge: #ffa03c;   /* ribbon colour at the ribbon bundle's edge (mid 0) */
  --ek-art-ribbon-core: #ff3c3c;   /* ribbon colour at the bundle's centre (mid 1) */
  --ek-glow-step: 0 0 26px rgba(196, 37, 43, 0.55);   /* active step badge */
  --ek-radius-6: 6px;               /* art / card frames (inputs keep --input-border-radius) */
  /* Solutions / AI Engineering build (2026-10-10): the app-window demo */
  --ek-icon-off: #bdbdbd;           /* inactive step-rail radio glyph on a light surface */
  --ek-fs-72: 72px;                 /* the demo's QR-code glyph (vending, cashless payment) */
  --ek-glow-flow: 0 0 28px rgba(196, 37, 43, 0.55);  /* active step icon, sticky "How it works" */
  --ek-glow-story: 0 0 18px rgba(255, 90, 95, 0.7);  /* last milestone dot, About timeline */
}