/* Portal design tokens — load AFTER theme-{key}.css, BEFORE shell / ui / forms / modules.
   Palette files supply --color-* / --surface-* / --text-* / --chrome-*; this file aliases
   them to --portal-* and keeps geometry (buttons, floats). Themes change colors only. */

:root {
    color-scheme: light;
}

:root,
body.portal-app,
body.portal-auth {
    /* Brand & semantic colors → --portal-* */
    --portal-primary: var(--color-primary);
    --portal-primary-rgb: var(--color-primary-rgb);
    --portal-primary-hover: var(--color-primary-hover);
    --portal-chrome: var(--color-chrome);
    --portal-body-bg: var(--surface-body);
    --portal-body-color: var(--text-body);
    --portal-body-color-rgb: var(--text-body-rgb);
    --portal-border: var(--border-color);
    --portal-danger: var(--color-danger);
    --portal-danger-hover: var(--color-danger-hover);
    --portal-danger-light: var(--color-danger-light);
    --portal-success: var(--color-success);
    --portal-success-rgb: var(--color-success-rgb);
    --portal-success-light: var(--color-success-light);
    --portal-primary-light: var(--tint-primary);
    --portal-focus: var(--portal-primary);
    --portal-warning-banner: var(--color-warning-banner);
    --portal-muted: var(--text-muted);
    --portal-input-bg: var(--surface-input);
    --portal-card-bg: var(--surface-card);
    --portal-soft-bg: var(--surface-soft);
    --portal-soft-border: var(--surface-soft-border);
    --portal-soft-text: var(--surface-soft-text);
    --portal-info: var(--color-info);
    --portal-info-rgb: var(--color-info-rgb);
    --portal-warning: var(--color-warning);
    --portal-warning-rgb: var(--color-warning-rgb);
    --portal-text-on-brand: var(--text-on-brand);

    /* Chrome */
    --portal-header-fg: var(--chrome-header-fg);
    --portal-header-fg-muted: var(--chrome-header-fg-muted);
    --portal-header-hover: var(--chrome-header-hover);
    --portal-footer-fg: var(--chrome-header-fg);
    --portal-footer-fg-muted: var(--chrome-header-fg-muted);
    --portal-footer-hover: var(--chrome-header-hover);

    /* Floating controls — Notch border style sizing variables */
    --portal-float-radius: 0.375rem;
    --portal-float-focus-shadow: 0 0 0 0.2rem
        rgba(var(--portal-primary-rgb), 0.2);

    /* Default (Large) size */
    --floating-height: 48px;
    --floating-padding-x: 12px;
    --floating-font-size: 14px;
    --floating-label-left: 12px;

    /* Medium size */
    --floating-height-md: 38px;
    --floating-padding-x-md: 10px;
    --floating-font-size-md: 13px;
    --floating-label-left-md: 10px;

    /* Small size */
    --floating-height-sm: 30px;
    --floating-padding-x-sm: 8px;
    --floating-font-size-sm: 12px;
    --floating-label-left-sm: 8px;

    --bs-primary: var(--portal-primary);
    --bs-primary-rgb: var(--portal-primary-rgb);
    --bs-danger: var(--portal-danger);
    /*
     * Do NOT map --bs-body-bg to the page surface (--portal-body-bg).
     * Bootstrap form-control, form-check-input, and .card inherit --bs-body-bg;
     * using the gray page color makes chips/inputs/cards look transparent/broken.
     * Page background is applied on body in shell.css instead.
     */
    --bs-body-bg: var(--portal-input-bg);
    --bs-body-color: var(--portal-body-color);
    --bs-border-color: var(--portal-border);
    --bs-secondary-color: var(--portal-muted);
    --bs-tertiary-bg: var(--portal-soft-bg);
    --bs-form-check-bg: var(--portal-input-bg);
    /* Bootstrap .card also resets --bs-card-bg to --bs-body-bg on the element */
    --bs-card-bg: var(--portal-card-bg);
    --bs-card-cap-bg: var(--portal-soft-bg);
    --bs-card-color: var(--portal-body-color);

    /* Form field spacing — gap between stacked form-floating fields */
    --portal-float-gap: 0.25rem;

    /* Vertical rhythm for floats, icon input-groups, and stacked chips */
    --portal-control-gap-y: 0.55rem;

    /*
     * Button size scale — aligned to floating-label heights.
     * Geometry belongs here; context CSS must not override these.
     *   sm → ~26px  |  md (default) → ~30px  |  lg → ~38px
     */
    --portal-btn-height-sm: 1.625rem; /* 26px */
    --portal-btn-height-md: 1.875rem; /* 30px */
    --portal-btn-height-lg: 2.375rem; /* 38px */
    --portal-btn-pad-y-sm: 0.1875rem; /* 3px */
    --portal-btn-pad-x-sm: 0.625rem; /* 10px */
    --portal-btn-pad-y-md: 0.3125rem; /* 5px */
    --portal-btn-pad-x-md: 0.9375rem; /* 15px */
    --portal-btn-pad-y-lg: 0.5625rem; /* 9px */
    --portal-btn-pad-x-lg: 1.25rem; /* 20px */
    --portal-btn-font-sm: 0.75rem; /* 12px */
    --portal-btn-font-md: 0.8125rem; /* 13px */
    --portal-btn-font-lg: 0.875rem; /* 14px */
    --portal-btn-icon-sm: 0.8125rem; /* 13px */
    --portal-btn-icon-md: 0.9375rem; /* 15px */
    --portal-btn-icon-lg: 1rem; /* 16px */
}