/* GENERATED from plugins/apotune-design-system/tokens/design-tokens.json — do not edit by hand. */
/* Re-run /apotune-design-system:emit-tokens to refresh. */
/*
 * ApoTune semantic design tokens (--ds-*). This is the SOURCE layer the rest of
 * the portal bridges onto: app.css re-points the Bootstrap --bs-* variables (and
 * the legacy --bg-color/--nav-bg/... aliases) at these tokens, so the whole
 * override layer inherits the brand without per-rule edits.
 *
 * Two-color identity — keep them distinct:
 *   --ds-color-brand-primary  = lime #93EC29  → identity + success/done.
 *   --ds-color-action-primary = blue #2979FF  → buttons, links, focus, selected nav.
 *
 * Dark set lives under [data-color-mode="dark"] (the portal's dark signal,
 * which also covers the Developer theme — the Developer theme keeps its own
 * Ayu palette in app.css and does not consume the brand colors here).
 */

/* ── Self-hosted brand fonts (variable, latin subset) ─────────────────────── */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/nunito.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/nunito-sans.woff2") format("woff2");
}

/* ── Light (default) ──────────────────────────────────────────────────────── */
:root {
  /* Brand — identity, success/done */
  --ds-color-brand-primary:       #93EC29;
  --ds-color-brand-primary-hover: #65DE00;
  --ds-color-on-brand:            #2B383E;

  /* Action — interactivity */
  --ds-color-action-primary:            #2979FF;
  --ds-color-action-primary-hover:      #005FFF;
  --ds-color-action-on-primary:         #FFFFFF;
  --ds-color-action-disabled:           #2979FF33;
  --ds-color-action-selected-tint:      #2979FF14;
  --ds-color-action-selected-indicator: #2979FF1F;

  /* Text — one ink, hierarchy via secondary + opacity */
  --ds-color-text-primary:   #2B383E;
  --ds-color-text-secondary: #78909C;
  --ds-color-text-disabled:  #78909C99;
  --ds-color-text-inverse:   #FFFFFF;
  --ds-color-text-link:      #2979FF;

  /* Surface */
  --ds-color-surface-base:         #FFFFFF;
  --ds-color-surface-raised:       #FFFFFF;
  --ds-color-surface-canvas:       #F0F0F0;
  --ds-color-surface-field:        #78909C1A;
  --ds-color-surface-field-focus:  #78909C33;
  --ds-color-surface-field-search: #ECEFF1;
  --ds-color-surface-subtle:       #78909C4D;

  /* Feedback */
  --ds-color-feedback-error:           #FF3D00;
  --ds-color-feedback-warning:         #FFC400;
  --ds-color-feedback-success:         #93EC29;
  --ds-color-feedback-info:            #2979FF;
  --ds-color-feedback-warning-surface: #FFC4001F;
  --ds-color-feedback-error-surface:   #FF3D001A;

  /* Border */
  --ds-color-border-default:  #78909C1A;
  --ds-color-border-focus:    #78909C33;
  --ds-color-border-divider:  #E2E2E2;
  --ds-color-border-selected: #2979FF;
  --ds-color-border-strong:   #DCE1E4;

  /* Scrim */
  --ds-color-scrim-modal: #2B383E33;
  --ds-color-scrim-label: #2B383ECC;

  /* State */
  --ds-color-state-selected-row: #CEDBF2;

  /* Spacing (4pt scale) */
  --ds-space-xxs: 4px;
  --ds-space-xs:  8px;
  --ds-space-sm:  12px;
  --ds-space-md:  16px;
  --ds-space-lg:  24px;
  --ds-space-xl:  32px;
  --ds-space-xxl: 48px;

  /* Radius */
  --ds-radius-sm:   4px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;
  --ds-radius-pill: 9999px;

  /* Sizing */
  --ds-size-icon-sm:       16px;
  --ds-size-icon-md:       20px;
  --ds-size-icon-lg:       24px;
  --ds-size-icon-xl:       32px;
  --ds-size-tap-target:    48px;
  --ds-size-input-height:  48px;
  --ds-size-appbar-height: 72px;

  /* Typography */
  --ds-font-display: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-size-body: 17px;

  /* Motion */
  --ds-duration-fast:   200ms;
  --ds-duration-medium: 250ms;
  --ds-duration-slow:   300ms;
}

/* ── Dark — mirror of the light set, color tokens only.
   Non-color tokens (space, radius, size, font, motion) inherit from :root. ── */
:root[data-color-mode="dark"] {
  /* Brand */
  --ds-color-brand-primary:       #93EC29;
  --ds-color-brand-primary-hover: #A8F24E;
  --ds-color-on-brand:            #11181C;

  /* Action */
  --ds-color-action-primary:            #5B9DFF;
  --ds-color-action-primary-hover:      #80B4FF;
  --ds-color-action-on-primary:         #11181C;
  --ds-color-action-disabled:           #5B9DFF40;
  --ds-color-action-selected-tint:      #5B9DFF24;
  --ds-color-action-selected-indicator: #5B9DFF33;

  /* Text */
  --ds-color-text-primary:   #EAF0F2;
  --ds-color-text-secondary: #9FB2BB;
  --ds-color-text-disabled:  #9FB2BB73;
  --ds-color-text-inverse:   #11181C;
  --ds-color-text-link:      #5B9DFF;

  /* Surface */
  --ds-color-surface-base:         #1B252A;
  --ds-color-surface-raised:       #26333A;
  --ds-color-surface-canvas:       #11181C;
  --ds-color-surface-field:        #FFFFFF12;
  --ds-color-surface-field-focus:  #FFFFFF21;
  --ds-color-surface-field-search: #26333A;
  --ds-color-surface-subtle:       #FFFFFF1A;

  /* Feedback */
  --ds-color-feedback-error:           #FF6B4A;
  --ds-color-feedback-warning:         #FFCB2E;
  --ds-color-feedback-success:         #93EC29;
  --ds-color-feedback-info:            #5B9DFF;
  --ds-color-feedback-warning-surface: #FFCB2E29;
  --ds-color-feedback-error-surface:   #FF6B4A29;

  /* Border */
  --ds-color-border-default:  #FFFFFF24;
  --ds-color-border-focus:    #5B9DFF;
  --ds-color-border-divider:  #FFFFFF17;
  --ds-color-border-selected: #5B9DFF;
  --ds-color-border-strong:   #36454D;

  /* Scrim */
  --ds-color-scrim-modal: #00000099;
  --ds-color-scrim-label: #000000B3;

  /* State */
  --ds-color-state-selected-row: #5B9DFF2E;
}