/*
 * EPA theme — definitions
 * ------------------------------------------------------------
 * Vocabulary owned by EPA:
 *   1. fonts
 *   2. palette / primitives
 *   3. semantic tokens
 *   4. light / dark theme values
 *   5. Pico adapter
 *
 * This file defines values and integration variables.
 * Component selectors belong in epa.css.
 */

/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: "SourceSans3";
  src: url("../fonts/source-sans-3/SourceSans3-VariableFont_wght.woff2")
       format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}


/* ============================================================
   PRIMITIVES
   ============================================================ */

:root {
  /* ---------- Neutres absolus ---------- */
  --epa-black: #000000;
  --epa-white: #ffffff;

  /* ---------- Palette : violet ---------- */
  --epa-violet-black:    #07020b;
  --epa-violet-darkest:  #40214f;
  --epa-violet-darker:   #552c68;
  --epa-violet-dark:     #69377f;
  --epa-violet:          #7f4997;
  --epa-violet-light:    #9b69ae;
  --epa-violet-lighter:  #b58ac2;
  --epa-violet-lightest: #d9c6df;
  --epa-violet-white:    #f4f0f7;

  /* ---------- Palette : green ---------- */
  --epa-green-black:    #071001;
  --epa-green-darkest:  #395411;
  --epa-green-darker:   #4e7518;
  --epa-green-dark:     #64951e;
  --epa-green:          #7eb927;
  --epa-green-light:    #9dce4c;
  --epa-green-lighter:  #b9df76;
  --epa-green-lightest: #dcefb9;
  --epa-green-white:    #f4faf0;

  /* ---------- Palette : orange ---------- */
  --epa-orange-black:    #170901;
  --epa-orange-darkest:  #7d410d;
  --epa-orange-darker:   #a45812;
  --epa-orange-dark:     #c76d17;
  --epa-orange:          #e58a2b;
  --epa-orange-light:    #eba45a;
  --epa-orange-lighter:  #f2bd82;
  --epa-orange-lightest: #f8dcb9;
  --epa-orange-white:    #fef6f0;

  /* ---------- Palette : gris ---------- */
  --epa-grey-black:    #08090b;
  --epa-grey-darkest:  #111111;
  --epa-grey-darker:   #1d1f25;
  --epa-grey-dark:     #2a2d34;
  --epa-grey:          #898989;
  --epa-grey-light:    #9a9aa0;
  --epa-grey-lighter:  #c5c5c5;
  --epa-grey-lightest: #e2e2e2;
  --epa-grey-white:    #f8f8f8;

  /* ---------- Typography ---------- */
  --epa-font-family:
    "SourceSans3",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  --epa-font-family-display: var(--epa-font-family);
  --epa-font-family-mono:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;

  --epa-font-size-small: 15px;
  --epa-font-size-medium: 16px;

  --epa-font-weight-normal: 400;
  --epa-font-weight-medium: 500;
  --epa-font-weight-heading: 600;
  --epa-font-weight-strong: 800;

  --epa-tx-decoration-none: none;

  /* ---------- Geometry ---------- */
  --epa-br-thickness-thin: .8px;

  --epa-radius-xs:   4px;
  --epa-radius-sm:   6px;
  --epa-radius:      8px;
  --epa-radius-md:   12px;
  --epa-radius-lg:   16px;
  --epa-radius-pill: 9999px;

  /* ---------- Interaction geometry ---------- */
  --epa-action-radius: var(--epa-radius-sm);

  /* ---------- Overlay ---------- */
  --epa-overlay-opacity: 35%;

  /* ---------- Motion ---------- */
  --epa-duration-fast: .15s;
  --epa-duration: .2s;
  --epa-duration-slow: .35s;
  --epa-ease: ease;
  --epa-ease-emphasis: cubic-bezier(.2, .8, .2, 1);
}


/* ============================================================
   SEMANTIC TOKENS — LIGHT
   ============================================================ */

:root,
:root[data-theme="light"] {
  /* ---------- Surfaces, abrev : bg ---------- */
  --epa-bg:          var(--epa-grey-white);
  --epa-bg-elev:     var(--epa-white);
  --epa-bg-muted:    var(--epa-green-lightest);
  --epa-bg-inverse:  var(--epa-grey-darkest);

  /* ---------- Text, abrev : tx ---------- */
  --epa-tx-strong:   var(--epa-grey-darkest);
  --epa-tx-muted:    var(--epa-grey);
  --epa-tx-inverse:  var(--epa-green-lightest);
  --epa-tx-hover:    var(--epa-violet-dark);

  /* ---------- Overlays ---------- */
  
  --epa-overlay-bg:         rgba(20, 20, 20, 0.94);
  --epa-overlay-button-bg:  rgba(0, 0, 0, 0.45);

  /* ---------- Borders / dividers ---------- */
  --epa-br-ring:            rgba(34, 42, 53, .08);
  --epa-br-strong:          rgba(34, 42, 53, .14);
  --epa-divider:            rgba(34, 42, 53, .08);

  /* ---------- Shadows ---------- */
  --epa-shadow-card:
    rgba(19, 19, 22, .7) 0 1px 5px -4px,
    rgba(34, 42, 53, .08) 0 0 0 1px,
    rgba(34, 42, 53, .05) 0 4px 8px 0;

  --epa-shadow-raised:
    rgba(19, 19, 22, .7) 0 1px 5px -4px,
    rgba(34, 42, 53, .1) 0 0 0 1px,
    rgba(34, 42, 53, .08) 0 12px 28px -8px;

  --epa-shadow-dropdown:
    rgba(19, 19, 22, .7) 0 1px 5px -4px,
    rgba(34, 42, 53, .1) 0 0 0 1px,
    rgba(34, 42, 53, .12) 0 16px 32px -12px;

  --epa-shadow-inset:
    inset 0 1px 1.9px rgba(0, 0, 0, .16);

  --epa-shadow-highlight:
    inset 0 2px 0 rgba(255, 255, 255, .15);

  /* ---------- Navigation ---------- */
  --epa-nav-bg:     rgba(255, 255, 255, .78);
  --epa-nav-border: rgba(34, 42, 53, .08);

  /* ---------- Focus ---------- */
  --epa-focus-ring: color-mix(in oklab, var(--epa-violet) 45%, transparent);

  /* ---------- Generic interaction ---------- */
  --epa-action-bg:            var(--epa-green-lightest);
  --epa-action-bg-hover:      var(--epa-green-lighter);
  --epa-action-bg-active:     var(--epa-green-white);
  --epa-action-bg-disabled:   var(--epa-bg-muted);
  --epa-action-br-color:      var(--epa-green-lighter);
  --epa-action-br-radius:     var(--epa-radius-sm);
  --epa-action-br:            var(--epa-br-thickness-thin) solid var(--epa-action-br-color);
  --epa-action-tx:            var(--epa-violet-dark);
  --epa-action-tx-hover:      var(--epa-tx-hover);
  --epa-action-tx-disabled:   var(--epa-tx-muted);
  --epa-action-tx-decoration: var(--epa-tx-decoration-none);
  --epa-action-font-weight:   var(--epa-font-weight-medium);

  /* ---------- Generi editorial ---------- */
  --epa-edit-tx:              var(--epa-violet-darkest);
  --epa-edit-heading-color:   var(--epa-violet);
  --epa-edit-br-color:        var(--epa-violet-lightest);
  --epa-edit-br:          var(--epa-br-thickness-thin) solid var(--epa-edit-br-color);
  --epa-edit-divider:         var(--epa-violet-light);

  /* ---------- Menu ---------- */
  --epa-menu-bg:              var(--epa-violet-white);
  --epa-menu-bg-active:       var(--epa-violet-dark);
  --epa-menu-bg-hover:        var(--epa-violet-light);
  --epa-menu-tx:              var(--epa-green-darker);
  --epa-menu-tx-active:       var(--epa-green-lighter);
  --epa-menu-tx-hover:        var(--epa-green-lighter);

  /* ---------- Tabs ---------- */
  --epa-tab-bg:               var(--epa-green-lightest);
  --epa-tab-bg-hover:         var(--epa-green-lighter);
  --epa-tab-bg-active:        var(--epa-green-white);
  --epa-tab-text:             var(--epa-violet);
  --epa-tab-text-active:      var(--epa-violet-dark);
  --epa-tab-border:           var(--epa-action-br);
  --epa-tab-border-radius:    var(--epa-action-radius) var(--epa-action-radius) 0 0;
  --epa-tab-border-active:    var(--epa-green-light);

  /* ---------- Editorial notices ---------- */
  --epa-notice-note:       var(--epa-green-light);
  --epa-notice-error:      var(--epa-orange-light);

  /* ---------- Selection ---------- */
  --epa-selection-bg: var(--epa-violet);
  --epa-selection-text: var(--epa-tx-inverse);

  /* ---------- Form integration ---------- */
  --epa-form-bg:          var(--epa-bg);
  --epa-form-bg-focus:    var(--epa-bg-elev);
  --epa-form-border:      rgba(34, 42, 53, .16);
  --epa-form-text:        var(--epa-edit-tx);
}


:root[data-theme="dark"] {
  /* ---------- Surfaces ---------- */
  --epa-bg:          var(--epa-grey-black);
  --epa-bg-elev:     var(--epa-grey-darker);
  --epa-bg-muted:    var(--epa-green-darkest);
  --epa-bg-inverse:  var(--epa-grey-white);

  /* ---------- Text ---------- */
  --epa-tx-strong:   var(--epa-white);
  --epa-tx-muted:    var(--epa-grey-light);
  --epa-tx-inverse:  var(--epa-grey-darkest);
  --epa-tx-hover:    var(--epa-violet-lightest);

  /* ---------- Borders / dividers ---------- */
  --epa-br-ring:   rgba(255, 255, 255, .14);
  --epa-br-strong: rgba(255, 255, 255, .20);
  --epa-divider:       rgba(255, 255, 255, .10);

  /* ---------- Shadows ---------- */
  --epa-shadow-card:
    rgba(0, 0, 0, .85) 0 1px 5px -4px,
    rgba(255, 255, 255, .14) 0 0 0 1px,
    rgba(0, 0, 0, .55) 0 4px 12px 0;

  --epa-shadow-raised:
    rgba(0, 0, 0, .85) 0 1px 5px -4px,
    rgba(255, 255, 255, .14) 0 0 0 1px,
    rgba(0, 0, 0, .65) 0 14px 32px -8px;

  --epa-shadow-dropdown:
    rgba(0, 0, 0, .85) 0 1px 5px -4px,
    rgba(255, 255, 255, .14) 0 0 0 1px,
    rgba(0, 0, 0, .75) 0 16px 32px -12px;

  --epa-shadow-inset:
    inset 0 1px 1.9px rgba(0, 0, 0, .5);

  --epa-shadow-highlight:
    inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---------- Navigation ---------- */
  --epa-nav-bg:     rgba(11, 11, 12, .78);
  --epa-nav-border: rgba(255, 255, 255, .06);

  /* ---------- Generic interaction ---------- */
  --epa-action-bg:                var(--epa-green-darkest);
  --epa-action-bg-hover:          var(--epa-green-darker);
  --epa-action-bg-active:         var(--epa-green-light);
  --epa-action-br-color:          var(--epa-green-dark);
  --epa-action-br-thickness:      var(--epa-green-dark);
  --epa-action-br-radius:         var(--epa-radius-sm);
  --epa-action-br:                var(--epa-br-thickness-thin) solid var(--epa-action-br-color);
  --epa-action-tx:                var(--epa-violet-light);
  --epa-action-tx-hover:          var(--epa-tx-hover);
  --epa-action-bg-disabled:       var(--epa-bg-muted);
  --epa-action-tx-disabled:       var(--epa-tx-muted);

  /* ---------- Generic editorial ---------- */
  --epa-edit-tx:                  var(--epa-grey-white);
  --epa-edit-br-color:            var(--epa-violet-dark);
  --epa-edit-br:                  var(--epa-br-thickness-thin) solid var(--epa-edit-br-color);
  --epa-edit-divider:             var(--epa-violet-light);
  --epa-edit-heading-color:       var(--epa-violet-light);

  /* ---------- Menu ---------- */
  --epa-menu-bg:                  var(--epa-violet-black);
  --epa-menu-bg-active:           var(--epa-violet-light);
  --epa-menu-bg-hover:            var(--epa-violet);
  --epa-menu-tx:                  var(--epa-green-darkest);
  --epa-menu-tx-active:           var(--epa-green-darker);
  --epa-menu-tx-hover:            var(--epa-green-darker);

  /* ---------- Tabs ---------- */
  --epa-tab-bg:            var(--epa-green-darkest);
  --epa-tab-bg-hover:      var(--epa-green-darker);
  --epa-tab-bg-active:     var(--epa-green-light);
  --epa-tab-text:          var(--epa-violet-light);
  --epa-tab-text-active:   var(--epa-violet-darkest);
  --epa-tab-border:        var(--epa-action-br);
  --epa-tab-border-active: var(--epa-green-light);

  /* ---------- Form integration ---------- */
  --epa-form-bg:     var(--epa-bg-elev);
  --epa-form-bg-focus: var(--epa-bg-elev);
  --epa-form-border: rgba(255, 255, 255, .12);
  --epa-form-text:   var(--epa-edit-tx);
}


/* ============================================================
   ADAPTER — PICO
   ------------------------------------------------------------
   Pico remains an implementation dependency for now.
   EPA owns the values exposed to Pico; EPA components do not.
   ============================================================ */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-font-family-sans-serif: var(--epa-font-family);
  --pico-font-family-display: var(--epa-font-family-display);
  --pico-font-family-monospace: var(--epa-font-family-mono);

  --pico-font-size: 16px;
  --pico-line-height: 1.6;
  --pico-font-weight: var(--epa-font-weight-normal);
  --pico-border-radius: var(--epa-radius);
  --pico-spacing: 1rem;

  --pico-background-color: var(--epa-bg);
  --pico-color: var(--epa-edit-tx);

  --pico-h1-color: var(--epa-edit-heading-color);
  --pico-h2-color: var(--epa-edit-heading-color);
  --pico-h3-color: var(--epa-edit-heading-color);
  --pico-h4-color: var(--epa-edit-heading-color);
  --pico-h5-color: var(--epa-edit-heading-color);
  --pico-h6-color: var(--epa-edit-heading-color);

  --pico-muted-color: var(--epa-tx-muted);
  --pico-muted-border-color: var(--epa-divider);

  --pico-primary: var(--epa-edit-tx);
  --pico-primary-hover: var(--epa-tx-hover);
  --pico-primary-focus: var(--epa-focus-ring);
  --pico-primary-inverse: var(--epa-tx-inverse);

  --pico-secondary: var(--epa-tx-muted);
  --pico-secondary-hover: var(--epa-edit-tx);

  --pico-contrast: var(--epa-edit-tx);
  --pico-contrast-hover: var(--epa-tx-hover);
  --pico-contrast-inverse: var(--epa-tx-inverse);

  --pico-card-background-color: var(--epa-bg-elev);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: var(--epa-shadow-card);
  --pico-card-sectioning-background-color: var(--epa-bg-muted);

  --pico-form-element-background-color: var(--epa-form-bg);
  --pico-form-element-border-color: var(--epa-form-border);
  --pico-form-element-color: var(--epa-form-text);
  --pico-form-element-focus-color: var(--epa-focus-ring);

  --pico-primary-background: var(--epa-violet);
  --pico-primary-border: var(--epa-violet);
}


/* ============================================================
   ADAPTER — PLUGIN CONTRACTS
   ------------------------------------------------------------
   Keep plugin-specific variables here when a plugin needs EPA
   values. Actual plugin selectors stay in epa.css.
   ============================================================ */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* Login / form plugins can consume these without knowing
     anything about EPA's internal component vocabulary. */
  --epa-plugin-focus-ring: var(--epa-focus-ring);
}