/* Front Legal house style

   This is the only file that holds colours, shadows, gradients, corner radii
   and button weight for the platform and the partner pages.

   To apply a new house style:
   1  Change the values in the groups Brand, Neutral and Status below.
   2  Leave the group Derived alone: it follows Brand and Neutral automatically.
   3  Follow the checklist in docs/THEMING.md (contrast, PDF colours, loader).

   Rules for code changes:
   - Only --fl-* tokens may carry a colour value. Other stylesheets use
     var(--fl-...) and never a hex, rgb() or named colour.
   - Transparent variants are written as
     color-mix(in srgb, var(--fl-color-...) NN%, transparent).
   - Layout, spacing and motion tokens are not part of the house style and
     stay as --frontlegal-* in frontlegal-platform.css.

   The tokens live on :root so the app, the page scrollbar and the partner
   pages share them. The --fl- prefix keeps them apart from theme variables. */

:root {
    /* Brand: main colour, used for primary actions, titles, sidebar accents */
    --fl-color-primary: #12263f;
    --fl-color-primary-hover: #1c3b5d;

    /* Brand: second colour, used for links, secondary actions, focus, progress */
    --fl-color-secondary: #315f85;
    --fl-color-secondary-hover: #27506f;
    --fl-color-secondary-soft: #eaf1f6;
    --fl-color-secondary-soft-hover: #dde8f0;
    --fl-color-secondary-tint: #f4f8fb;

    /* Brand: text and icons placed on primary, secondary or danger */
    --fl-color-on-primary: #ffffff;

    /* Neutral: text */
    --fl-color-text: #25364a;
    --fl-color-text-muted: #526579;
    --fl-color-text-subtle: #68798b;

    /* Neutral: lines and field borders */
    --fl-color-border: #e3eaf1;
    --fl-color-border-strong: #cfd9e3;
    --fl-color-control-border: #84919d;

    /* Neutral: backgrounds */
    --fl-color-surface: #ffffff;
    --fl-color-surface-soft: #f7f9fb;
    --fl-color-surface-active: #eef2f6;
    --fl-color-canvas: #f3f5f7;

    /* Status: meaning, always combined with text or an icon */
    --fl-color-danger: #9f2d2d;
    --fl-color-danger-hover: #802424;
    --fl-color-danger-soft: #fbeeee;
    --fl-color-success: #26734d;
    --fl-color-success-soft: #eaf5ef;
    --fl-color-warning: #8a5713;
    --fl-color-warning-soft: #fcf3e5;

    /* Status: presence dots next to a member name */
    --fl-color-presence-online: #1c8c61;
    --fl-color-presence-busy: #b4504b;
    --fl-color-presence-away: #b58026;
    --fl-color-presence-offline: #788494;

    /* Shape: corner radii from small controls to large panels */
    --fl-radius-xs: 9px;
    --fl-radius-sm: 13px;
    --fl-radius-md: 20px;
    --fl-radius-lg: 26px;
    --fl-radius-pill: 999px;

    /* Effect: background blur behind the confirmation modal */
    --fl-blur-overlay: 6px;

    /* Type: the font itself always comes from the WordPress theme (inherit) */
    --fl-font-weight-button: 600;

    /* Derived: follows the colours above, normally no change needed */
    --fl-color-overlay: color-mix(in srgb, var(--fl-color-primary) 40%, transparent);
    --fl-shadow-card: 0 2px 8px color-mix(in srgb, var(--fl-color-primary) 2.5%, transparent);
    --fl-shadow-pop: 0 2px 6px color-mix(in srgb, var(--fl-color-primary) 5%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--fl-color-primary) 10%, transparent);
    --fl-shadow-drag: 0 10px 24px -16px color-mix(in srgb, var(--fl-color-primary) 30%, transparent);
    --fl-gradient-accent: linear-gradient(150deg, var(--fl-color-primary-hover) 0%, var(--fl-color-primary) 62%);
    --fl-gradient-accent-hover: linear-gradient(150deg, var(--fl-color-secondary) 0%, var(--fl-color-primary-hover) 62%);
    --fl-gradient-soft: linear-gradient(135deg, var(--fl-color-secondary-tint) 0%, var(--fl-color-secondary-soft) 100%);
    --fl-gradient-soft-hover: linear-gradient(135deg, var(--fl-color-secondary-soft) 0%, var(--fl-color-secondary-soft-hover) 100%);
    --fl-gradient-progress: linear-gradient(90deg, var(--fl-color-secondary) 0%, var(--fl-color-primary-hover) 100%);
    --fl-gradient-skeleton: linear-gradient(90deg, var(--fl-color-border) 0%, var(--fl-color-surface-soft) 50%, var(--fl-color-border) 100%);
}