/*
 * tenders.gy shared design tokens
 *
 * This is the canonical source for brand values used by WordPress and Laravel.
 * Run `npm --prefix app run design:sync` after changing this file.
 */

:root {
    color-scheme: light;

    /* Typography */
    --tg-font-body: 'ABC Social', system-ui, -apple-system, sans-serif;
    --tg-font-interface: 'ABC Social', system-ui, -apple-system, sans-serif;
    --tg-font-heading: 'ABC Social', system-ui, -apple-system, sans-serif;
    --tg-font-emphasis: 'ABC Social', system-ui, -apple-system, sans-serif;
    --tg-weight-light: 400;
    --tg-weight-regular: 400;
    --tg-weight-button: 400;
    --tg-weight-heading: 500;
    --tg-weight-emphasis: var(--tg-weight-regular);
    --tg-text-body-size: 20px;
    --tg-text-listing-title-size: 20px;
    --tg-text-listing-summary-size: 16px;
    --tg-text-label-size: 12px;
    --tg-text-interface-size: 16px;
    --tg-heading-section-size: clamp(1.5rem, 3vw, 2rem);
    --tg-nav-font-size: var(--tg-text-interface-size);
    --tg-nav-submenu-title-size: 15px;
    --tg-nav-submenu-description-size: 12px;
    --tg-nav-submenu-offset: 0.6rem;
    --tg-nav-submenu-width: 300px;
    --tg-footer-heading-size: 13px;
    --tg-footer-text-size: 15px;
    --tg-footer-legal-size: 13px;
    --tg-footer-heading-color: #f3f8f5;
    --tg-footer-text-color: #c7d8cf;
    --tg-footer-disclaimer-color: #a7bcb0;
    --tg-footer-social-color: #c7d8cf;

    /* Brand and interface colours */
    --tg-footer-background: #102b20;
    --tg-footer-border: #304d3e;
    --tg-footer-link-hover: #ffffff;
    --tg-ink: #000000;
    --tg-muted: #4f4f4f;
    --tg-navy: #00754a;
    --tg-navy-dark: #000000;
    --tg-green: #00754a;
    --tg-green-dark: #006241;
    --tg-green-soft: #d4e9e2;
    --tg-button: #00754a;
    --tg-button-hover: #006241;
    --tg-sky-soft: #eef6f3;
    --tg-gold: #fdb140;
    --tg-red: #b42318;
    --tg-paper: #f7f8f7;
    --tg-canvas: #ffffff;
    --tg-line: #d4e9e2;
    --tg-line-strong: #b8cbc1;
    --tg-header-line: #e5eeeb;

    /* Customer workspace: intentionally separate from marketing and admin. */
    --tg-workspace-sidebar-width: 285px;
    --tg-workspace-body-size: var(--tg-text-body-size);
    --tg-workspace-label-size: var(--tg-text-label-size);
    --tg-workspace-canvas: #ffffff;
    --tg-workspace-surface: #ffffff;
    --tg-workspace-secondary: #f6f7f6;
    --tg-workspace-hover: #f2f4f2;
    --tg-workspace-selected: #eaf4ee;
    --tg-workspace-selected-ink: #006241;
    --tg-workspace-border: #e2e5e2;
    --tg-workspace-input-border: #89958e;
    --tg-workspace-ink: #1f2723;
    --tg-workspace-muted: #66706a;

    /* Layout and shape */
    --tg-width: 64rem;
    --tg-page-gutter: 1rem;
    --tg-header-inner-height: 3.6rem;
    --tg-header-height: calc(var(--tg-header-inner-height) + 1px);
    --tg-header-logo-height: 3rem;
    --tg-header-logo-compact-height: 2rem;
    --tg-header-logo-mobile-width: 11rem;
    --tg-header-mobile-gutter: 0.6rem;
    --tg-button-height: 45px;
    --tg-app-button-height: 45px;
    --tg-header-control-height: var(--tg-button-height);
    --tg-header-control-compact-height: var(--tg-button-height);
    --tg-radius: 0.35rem;
    --tg-button-radius: 0.35rem;

    /* Motion */
    --tg-duration-fast: 150ms;
    --tg-duration-medium: 240ms;
    --tg-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --tg-space-1: 0.25rem;
    --tg-space-2: 0.5rem;
    --tg-space-3: 0.75rem;
    --tg-space-4: 1rem;
    --tg-space-5: 1.25rem;
    --tg-space-6: 1.5rem;
    --tg-space-8: 2rem;
    --tg-shadow-card: 0 0.75rem 2rem rgb(21 54 39 / 5%);
    --tg-shadow-popover: 0 0.75rem 2rem rgb(20 45 34 / 14%);
    --tg-focus-ring: 0 0 0 3px rgb(0 117 74 / 24%);
    --tg-status-success: #006241;
    --tg-status-warning: #8b5c12;
    --tg-status-danger: #a33b2f;
}