/* ==========================================================================
   ProjectManagementPro.ClientWASM — design tokens
   The single source of every visual value. A sheet or a component composes these
   tokens; it does not invent a literal that belongs here.

   The families, and what each one is for:

     Colour — canvas & surfaces   the page background and the panels that sit on it
     Colour — text                body text, secondary text and text on a dark fill
     Colour — borders             hairlines between regions and the outline of a control
     Colour — primary             the brand and the main action of a screen
     Colour — secondary           the supporting action of a screen
     Colour — accent              highlights; the warning role of the palette
     Colour — success             a confirmed, positive result
     Colour — error (danger)      a rejected action, an invalid field, a destructive action
     Focus                        the one focus treatment of the application
     Type                         family, sizes and weights
     Spacing                      the 4px rhythm every margin and padding is drawn from
     Radii                        the corner rounding of surfaces and controls
     Borders                      the hairline composites
     Elevation                    the shadow a surface that floats uses
     Layout                       the fixed geometry of the shell and the form column
     Controls                     the target height of an interactive control
     Motion                       the durations and the easing of a transition

   Values are the ones already approved for the product (four main colours, one grey
   scale, a 4px spacing base, 40px controls); they were read from the active client's
   `wwwroot/css/tokens.css` and reviewed before being reused. The type scale is the one
   exception and it is deliberate: the owner lowered every step by 2 px twice on
   2026-09-25, so the body reads at 12px and not at the 16px the original client used
   (`DEC-047` and `DEC-050`). The
   palette keeps the semantic role names it already had (`success`, `error`), so there
   is exactly one name per role. The old client's `components.css` is deliberately not
   carried over: every sheet here grows with the screens that use it.

   Two rules keep this file from growing a second vocabulary:
     * a colour role is named, so the approved palette is declared complete — a screen
       references `--color-error-soft` without caring which sheet used it before;
     * every other family declares only the steps a delivered rule consumes. A step
       that nothing uses is not declared, and the screen that needs it adds it with the
       rule that consumes it.
   ========================================================================== */

:root {
  /* ---- Colour: canvas and surfaces ------------------------------------ */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f3f6;
  /* The scrim a dialog paints between itself and the page. It is declared here rather than in the
     dialog sheet because it is a colour role, and it exists because the dialog family has a measured
     need for one: without it the surface that floats and the page under it are the same white. The
     value is the one already approved for the active client's overlay (`--overlay`), and it is built
     from the same ink (`24, 31, 42`) as `--shadow-md`, so the two floating treatments agree. */
  --color-overlay: rgba(24, 31, 42, 0.45);

  /* ---- Colour: text --------------------------------------------------- */
  --color-text: #1f2733;
  --color-text-muted: #5c6672;
  --color-text-subtle: #7b8592;
  --color-text-inverse: #ffffff;

  /* ---- Colour: borders ------------------------------------------------ */
  --color-border: #dfe3e9;
  --color-border-strong: #c6ccd6;

  /* ---- Colour: primary (brand, main action) --------------------------- */
  --color-primary: #2f5d8a;
  --color-primary-strong: #26496d;
  --color-primary-soft: #e8eff6;
  --color-primary-border: #b9cde0;

  /* ---- Colour: secondary (supporting action) -------------------------- */
  --color-secondary: #2f7d6f;
  --color-secondary-strong: #266459;
  --color-secondary-soft: #e6f2ef;
  --color-secondary-border: #b3d5cd;

  /* ---- Colour: accent (highlight, warning) ---------------------------- */
  /* Part of the approved four-colour palette. No screen of this delivery draws a warning
     yet, so these three are the only tokens here without a consumer — they are declared
     because a role is referenced by name, and a palette that grew a colour at a time would
     stop describing the product's palette. */
  --color-accent: #a8721f;
  --color-accent-soft: #fbf1e0;
  --color-accent-border: #e6cfa5;

  /* ---- Colour: semantic success --------------------------------------- */
  --color-success: #2f7d6f;
  --color-success-soft: #e6f2ef;
  --color-success-border: #b3d5cd;

  /* ---- Colour: semantic error, also the danger role -------------------- */
  --color-error: #b23c3c;
  --color-error-strong: #922f2f;
  --color-error-soft: #fbeaea;
  --color-error-border: #e7b7b7;

  /* ---- Focus ---------------------------------------------------------- */
  /* One treatment for the whole application: a real outline, so it is never clipped
     by an ancestor's `overflow`, it survives the element's own box-shadow, and it is
     still visible in a forced-colors theme. */
  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Type ----------------------------------------------------------- */
  /* **Two steps down, applied here and nowhere else.** The owner asked on 2026-09-25 for every size to come down
     2 px — «vamos a bajarle a todos los tipos de letra… por ejemplo lo que esté en 16px=>14px, 14px=>12px… el
     contenido ocupa mucho espacio por tamaño de letra» — and then for another 2 px — «bajemosle 2 px a todos los
     tipos de letra». The scale is therefore **4 px below the one the product was approved with**: the body reads at
     12 px instead of 16 and the label of a control at 10 px instead of 14. Because no sheet carries a size of its
     own (a literal here is the only way to write one), changing these six values moves the whole application at
     once, which is the point of the file.

     What this overrides, and it is recorded rather than implied: this scale used to say «body content is 16px and
     no interactive text goes below 14px: the audience reads long screens and is not always young-eyed», and the
     master specification carried that floor. The floor today is 10 px for a label, a button or a table cell and
     9 px for the guidance line under a page title (`DEC-047` and `DEC-050`), and §4.2 of
     `01-master-ui-spec.md` was moved with each step. The dense canvas of Schedule is not part of this scale: its
     four measured steps are its own (`--schedule-font-*`) because the owner froze the measurements of the original
     (`DEC-W74`). */
  --font-family-base: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* A machine token and not prose — the blocker codes a gate rejection answers with, which a screen
     shows as they arrived and never turns into a sentence. Monospace is what tells a reader that the
     string in front of them is the server's own key and not the client's wording. */
  --font-family-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;

  --font-size-xs: 0.5625rem;   /*  9px — the explanation under a page title: guidance, not content */
  --font-size-sm: 0.625rem;    /* 10px — labels, hints, errors, button text, and the content of an artefact */
  --font-size-base: 0.75rem;   /* 12px — field text and body content */
  --font-size-md: 0.8125rem;   /* 13px — emphasised body, empty-state title */
  --font-size-lg: 1rem;        /* 16px — card titles */
  --font-size-xl: 1.25rem;     /* 20px — page titles */

  --line-height-tight: 1.25;
  --line-height-snug: 1.4;
  --line-height-base: 1.55;

  --font-weight-semibold: 600;

  /* The step that says «this text is not emphasised», and it is needed because a table states its weight: a `th` is bold
     by the browser's own rule, and neither the header of a column nor the header of a row may read louder than the
     values under it. The owner settled it on 2026-09-27 — «evitar usar negrita» — with the data of a table reading like
     the text of a card: the only thing that changes between the two views is *how* the information is shown. */
  --font-weight-normal: 400;

  /* ---- Spacing: 4px base ---------------------------------------------- */
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs: 0.5rem;     /*  8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 2.5rem;    /* 40px */

  /* ---- Radii ---------------------------------------------------------- */
  /* Two steps are enough for what is drawn: a control and a panel. The approved scale's
     8px step arrives with the first surface that needs it. */
  --radius-sm: 5px;
  --radius-lg: 12px;

  /* ---- Borders -------------------------------------------------------- */
  --border-width: 1px;
  --border-default: var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);

  /* ---- Elevation ------------------------------------------------------ */
  /* One shadow: the panel that floats over the page background. */
  --shadow-md: 0 4px 10px rgba(24, 31, 42, 0.10), 0 1px 3px rgba(24, 31, 42, 0.06);

  /* ---- Layers --------------------------------------------------------- */
  /* The one layer a control opens **over** the surface it belongs to: the list of a single-select autocomplete
     hangs over the dialog, and the action row that ends that dialog is sticky with `z-index: 1`, so a list behind
     it would be covered by the very row the person is using. Everything else that stacks — the page's chrome, the
     notification host, the dialog itself — declares its own value in its own sheet, because those layers belong to
     the shell and not to a control. */
  --z-index-dropdown: 2;

  /* ---- Layout: the shell and the single-column form -------------------- */
  --layout-header-height: 38px;
  --layout-header-control-height: 30px;
  --layout-content-max: 1600px;
  --layout-content-padding: var(--space-lg);
  /* The width of the access column: the sign-in card of the active client measures
     440px including its padding, and the empty layout draws that same column with the
     panel inside it. */
  --layout-form-max: 440px;

  /* The floor of a tab of the artefact strip (`layout.css`, `DEC-051`): **the longest single word of the artefact
     names plus the tab's own padding.** The longest ones are twelve characters — `Stakeholders`, `Expectations`,
     `Deliverables` — and `ch` is the advance of `0` in the font the tab uses, so the floor follows the type scale
     instead of pinning a pixel value that the next step of that scale would leave behind. It is what stops `Scope`
     from becoming a third of the width of the row beside it; a name of two words is wider than this floor and keeps
     its own width. */
  --layout-artifact-tab-min-width: calc(12ch + 2 * var(--space-xs));

  /* ---- Controls: the target height of an interactive control ----------- */
  /* The approved scale also has 32px and 46px steps. No control in this delivery is
     compact or oversized, so those two are not declared: the screen that adds one
     declares it together with the rule that consumes it. */
  --control-height: 40px;   /* a comfortable target for the primary audience */

  /* The button is the one control that comes in runs — the two actions of a row, the three of a dialog, the four of a
     toolbar — so its height is its own step and not the control's. The owner asked for it on 2026-09-25, once the type
     scale had come down: «hemos ido reduciendo el tamaño de la letra, por lo cual está perfecto, pero el alto de los
     botones se ha quedado igual, entonces ahora vamos a reducir al mínimo el alto del botón» (`DEC-056`). 32px is the
     compact step this scale names, taken one step further on 2026-09-25 because the owner asked for the button to lose a little more height once it had no fill («aprovechar para quitarle un poco más de alto», `DEC-057`), and a touch layout keeps the 44px minimum, which is where `forms.css` meets
     the two. */
  --button-height: 28px;

  /* ---- Scrolling inside a panel ---------------------------------------- */
  /* The two regions of an artefact that scroll **inside their own area** instead of making the page longer — the items
     of the artefact, cards or table, and the Scope Builder — and the bar they are drawn with. The owner asked for both
     on 2026-09-25: «vamos a ponerle a Scopebuilder un scroll que tenga estilos así como la app y al listado de los items
     del artefacto también ponerle scroll con estilos de la app» (`DEC-062`).
     The bar is the app's own and not the browser's: thin, in the line colour of the surfaces, with its track on the
     muted surface, so a region that scrolls reads as part of the panel and not as a window inside it. Firefox reads the
     two `scrollbar-*` properties and the other engines read the `::-webkit-scrollbar` rules of `artifact-workspace.css`;
     both come from these five values and from nothing else, so the two areas draw the same bar. */
  --scrollbar-size: 10px;
  --scrollbar-thumb: var(--color-border-strong);
  --scrollbar-thumb-hover: var(--color-text-subtle);
  --scrollbar-track: var(--color-surface-muted);
  /* How tall such a region may grow before it starts scrolling: a share of the window and not a pixel count, because
     what it holds — cards, rows, a scope list — is what varies, and the floor of the frame (`28rem`) plus the strip of
     the chrome above it are what the rest of the window is for. */
  --artifact-scroll-max-height: min(70dvh, 48rem);
  /* **Y cuánto puede crecer la columna del Scope Builder, que es otra cosa.** Con el tope de arriba dejaba de crecer
     cuando aún sobraba casi un tercio de la ventana, y lo que la sección añade después —las tarjetas de un análisis y la
     lista de descartes— caía por debajo del pliegue de su propia caja. El dueño lo reportó el 2026-09-27: «a medida que
     crece el Scope Builder … el espacio se va acortando hacia abajo … ¿es posible que crezca de forma progresiva?».
     Así que su caja crece con lo que tiene y, cuando ya no cabe, es tan alta como la ventana menos lo que lleva encima:
     la cabecera de la aplicación (`--layout-header-height`, 64px), la cabecera de la página y la del panel (48px) y el
     relleno del cuerpo (16px). **Un solo número para ajustar** si el alto real cambia: el resto sale de aquí. */
  --artifact-scope-top-offset: 12rem;
  --artifact-scope-max-height: calc(100dvh - var(--artifact-scope-top-offset));

  /* ---- Motion --------------------------------------------------------- */
  /* `fast` is the duration of a hover, a focus or a border change; `loop` is one turn of a
     repeating indicator. Both are used by the sheets of this delivery. */
  --duration-fast: 120ms;
  --duration-loop: 900ms;
  --easing-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* ======================================================================
     The schedule family (Planning).

     Declared once, here, and never again (`DEC-W75`): the sheets of the family consume
     these and declare no token of their own. Every value is the one **measured** in the
     origin and written in `PLANNING-SCHEDULE-UI.md` §1 — the table and the diagram share
     the row height of 24px, the two headers measure 50px, the WBS node is 200x90, and the
     eight time scales, the four activity types and their colours are the ones §1.3.2 and
     §1.3.1 count. Nothing here is a preference: it is the measurement the owner froze in
     `DEC-W74` ("las medidas del original ganan"), and the visual pass edits these tokens
     instead of hunting values through the markup (`DEC-W84`).

     The diagram's timeline geometry — the eight day widths, the snap of a drag, the bounds
     that pad 7 days back to a Monday and 14 forward — is **not** here: it is arithmetic
     that the client consumes from `Shared/Schedule/ScheduleTimeScale.cs`, which the
     structural gate allows as visual geometry, and a copy of it in CSS would be a second
     declaration of the same measurement.
     ====================================================================== */

  /* ---- The row and the two headers, shared by the table and the diagram */
  --schedule-row-height: 44px;
  --schedule-header-height: 50px;
  /* The splitter between the table and the diagram, with the invisible grip each side. */
  --schedule-splitter-width: 6px;
  --schedule-splitter-grip-width: 4px;
  --schedule-splitter-grip-height: 32px;
  /* The indent one hierarchy level adds inside the name column. */
  --schedule-name-indent: 20px;

  /* ---- The columns of the table, in the widths §1.3.1 measures ------- */
  --schedule-column-grip: 20px;
  --schedule-column-id: 40px;
  --schedule-column-wbs: 56px;
  --schedule-column-name: 180px;
  --schedule-column-name-min: 100px;
  --schedule-column-duration: 64px;
  --schedule-column-date: 96px;
  /* The three reference columns the origin measures at 112px: assigned amount,
     responsible and predecessors. */
  --schedule-column-reference: 112px;
  --schedule-column-action: 32px;

  /* ---- The node of the WBS diagram (§1.4) ---------------------------- */
  --schedule-node-width: 200px;
  --schedule-node-height: 90px;
  --schedule-node-gap-horizontal: 40px;
  --schedule-node-gap-vertical: 60px;
  --schedule-node-radius: 6px;
  /* The breathing room the canvas leaves around the tree. */
  --schedule-canvas-padding: 100px;

  /* ---- The four activity types, each with its fill, soft fill and border */
  --schedule-phase: #3b82f6;
  --schedule-phase-soft: #dbeafe;
  --schedule-phase-border: #bfdbfe;
  --schedule-deliverable: #a855f7;
  --schedule-deliverable-soft: #f3e8ff;
  --schedule-deliverable-border: #e9d5ff;
  --schedule-activity: #22c55e;
  --schedule-activity-soft: #dcfce7;
  --schedule-activity-border: #bbf7d0;
  --schedule-milestone: #f97316;
  --schedule-milestone-soft: #ffedd5;
  --schedule-milestone-border: #fed7aa;

  /* ---- The marks of the diagram and of the table --------------------- */
  /* The critical path and the today line are the same red in the origin. Two roles, one
     value: the alias keeps the value written once and lets the visual pass move either
     role without touching the other's rules. */
  --schedule-critical: #ef4444;
  --schedule-critical-soft: #fef2f2;
  --schedule-today: var(--schedule-critical);
  --schedule-baseline: #9ca3af;
  --schedule-grid-line: #f3f4f6;
  --schedule-weekend: var(--schedule-grid-line);
  --schedule-row-hover: #dbeafe;
  --schedule-row-selected: #eff6ff;
  --schedule-row-selected-border: #3b82f6;
  --schedule-drop-target: #93c5fd;
  --schedule-drop-invalid: var(--schedule-critical);
  --schedule-insertion-line: #3b82f6;
  --schedule-dependency: #6b7280;
  --schedule-dependency-strong: #374151;
  --schedule-connector: #d1d5db;
  --schedule-drag: #3b82f6;
  --schedule-drag-strong: #1d4ed8;
  --schedule-canvas-ghost: #f0f9ff;
  --schedule-responsible: #6366f1;
  --schedule-amount: #059669;
  --schedule-tooltip-surface: #111827;

  /* ---- Type: the four dense steps the table, the diagram and the node use */
  /* Below the 14px floor the base scale sets for interactive text, because these are not
     labels of a control: they are the data of a grid of 24px rows, which §1.3.1 measures at
     10px, 11px, 12px and 13px. */
  --schedule-font-tiny: 10px;
  --schedule-font-label: 11px;
  --schedule-font-compact: 12px;
  --schedule-font-dense: 13px;

  /* ---- The layers the family stacks, in the order §1.4 measures ----- */
  --schedule-layer-sticky: 10;
  --schedule-layer-header: 20;
  --schedule-layer-floating: 50;
  --schedule-layer-tooltip: 100;
  --schedule-layer-over-control: 200;

  /* ---- Motion -------------------------------------------------------- */
  /* 150ms is the row and the dependency transition; 200ms is the table's width and the
     splitter's drag. */
  --schedule-transition: 150ms;
  --schedule-resize: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    /* The loop duration is deliberately left alone: a spinner that stops turning reads
       as a frozen screen. Reduced motion is served by the text next to it. */
    /* The schedule family's two durations are transitions of a row, a dependency and a
       column width, so they stop with the rest. */
    --schedule-transition: 0ms;
    --schedule-resize: 0ms;
  }
}