/* HOJOQ Design System — docs/BRAND-IDENTITY.md
   Page surfaces: canvas / bone / white. Ink is text contrast only, not chrome. */
:root {
    --rs-ink: #0A0A0A;
    --rs-ink-2: #161616;
    --rs-coral: #EA5B3C;
    --rs-coral-hover: #D14C30;
    --rs-coral-active: #B83F28;
    --rs-coral-soft: #FDE8E1;
    --rs-bone: #F3EFEA;

    --rs-bg: #F6F5F3;
    --rs-surface: #ffffff;
    --rs-text: #121212;
    --rs-muted: #6B6560;
    --rs-border: #E6E1DC;

    --rs-accent: var(--rs-coral);
    --rs-accent-dark: var(--rs-coral-hover);
    --rs-accent-soft: var(--rs-coral-soft);
    --rs-danger: #DC2626;
    --rs-danger-soft: #FEF2F2;
    --rs-success: #0D8A6A;
    --rs-success-soft: #ECFDF5;
    --rs-warning: #D97706;
    --rs-confirmed: #3D5A5B;

    --rs-table-open: #247A54;
    --rs-table-staff: #9A7429;
    --rs-table-reserved: #2D5A8F;
    --rs-table-seated: #A33B40;
    --rs-table-closed: #8A847C;

    /* Live floor plan canvas — warm bone tint (not slate) */
    --rs-fp-canvas: #EDE8E2;
    --rs-fp-canvas-grid: #E4DDD5;

    --rs-primary: var(--rs-accent);
    --rs-primary-dark: var(--rs-accent-dark);
    --rs-sidebar: var(--rs-bone);

    --bs-primary: #EA5B3C;
    --bs-primary-rgb: 234, 91, 60;
    --bs-link-color: #EA5B3C;
    --bs-link-hover-color: #D14C30;

    --rs-radius-sm: 8px;
    --rs-radius-md: 8px;
    --rs-radius-lg: 12px;
    --rs-radius-xl: 16px;
    --rs-radius-pill: 999px;

    --rs-space-1: 4px;
    --rs-space-2: 8px;
    --rs-space-3: 12px;
    --rs-space-4: 16px;
    --rs-space-5: 24px;
    --rs-space-6: 32px;
    --rs-space-7: 48px;

    --rs-shadow: 0 4px 24px rgba(10, 10, 10, 0.06);
    --rs-shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.12);

    --rs-font-sans: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", -apple-system, "Segoe UI", sans-serif;
    --rs-font-serif: var(--rs-font-sans);
    --rs-font-display: -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;

    --rs-text-xs: 12px;
    --rs-text-sm: 14px;
    --rs-text-md: 16px;
    --rs-text-lg: 20px;
    --rs-text-xl: 28px;
    --rs-text-2xl: 36px;

    --rs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --rs-duration: 150ms;
    --rs-duration-slow: 250ms;

    --rs-tap: 44px;
    --rs-cta-h: 56px;
    --rs-safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--rs-font-sans);
    color: var(--rs-text);
    background: var(--rs-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--rs-accent);
    outline-offset: 2px;
}

.rs-tap {
    min-height: var(--rs-tap);
    min-width: var(--rs-tap);
}

.rs-hidden {
    display: none !important;
}

/* Staff accessibility: large UI (localStorage hojoq_ui_scale=large; RS/POS shell only) */
html.hojoq-ui-large {
    font-size: 118.75%;
    --rs-text-xs: 14px;
    --rs-text-sm: 16px;
    --rs-text-md: 18px;
    --rs-text-lg: 24px;
    --rs-text-xl: 32px;
    --rs-text-2xl: 42px;
    --rs-tap: 52px;
    --rs-cta-h: 64px;
}

/* Konva floor plan uses pixel coords — keep canvas area at normal scale */
html.hojoq-ui-large .fp-canvas-wrap,
html.hojoq-ui-large .dash-fp-canvas,
html.hojoq-ui-large #fp-canvas-container,
html.hojoq-ui-large #pos-fp-canvas {
    font-size: 16px;
}