/* Spec-043 T021 — canonical design tokens and RTL/logical-property foundations.
   This layer is loaded before app.css. Existing selectors migrate to these roles incrementally;
   compatibility values stay in app.css until their consumers pass visual review.

   SIZES ARE IN PX ON PURPOSE (corrected in T027). design-system.md specifies every type, spacing,
   radius and control size in CSS px and promises "explicit tokens control rendered size", but the
   legacy shell sets `html, body { font-size: 15px }` (14px below 600px). Under that root, rem-based
   tokens rendered 7–12.5% smaller than specified: the 44px minimum touch target measured 41px and
   the 1440px admin canvas measured 1350px — both caught by the T027 rendered accessibility scan.
   Only this file and design-system.css consume these tokens, so px keeps the promised geometry
   exactly without touching any legacy page. Browser zoom (the 200% requirement) scales px normally.
   Breakpoint tokens stay in rem: media-query rem resolves against the initial 16px, not the
   overridden root, so 37.5rem is genuinely 600px. */
@layer spec043.tokens, spec043.foundation;

@layer spec043.tokens {
    :root {
        /* Typography */
        --font-admin: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
        --font-diner: 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
        --type-xs: 12px;
        --type-sm: 13px;
        --type-md: 15px;
        --type-lg: 18px;
        --type-xl: 22px;
        --type-2xl: 28px;
        --leading-xs: 18px;
        --leading-sm: 20px;
        --leading-md: 24px;
        --leading-lg: 28px;
        --leading-xl: 32px;
        --leading-2xl: 38px;
        --weight-regular: 400;
        --weight-medium: 500;
        --weight-semibold: 600;
        --weight-bold: 700;

        /* Semantic color roles */
        --color-canvas: #f6f8fa;
        --color-canvas-inverse: #0f172a;
        --color-surface: #ffffff;
        --color-subtle: #f0f3f6;
        --color-text: #111827;
        --color-muted: #5b6472;
        --color-border: #d6dce3;
        --color-border-strong: #7c8797;
        --color-primary: #0f766e;
        --color-primary-hover: #115e59;
        --color-primary-subtle: #ccfbf1;
        --color-info: #1d4ed8;
        --color-info-subtle: #eff6ff;
        --color-info-border: #bfdbfe;
        --color-success: #15803d;
        --color-success-ink: #166534;
        --color-success-subtle: #dcfce7;
        --color-success-border: #86efac;
        --color-warning: #a15c00;
        --color-warning-ink: #92400e;
        --color-warning-subtle: #fef3c7;
        --color-warning-border: #fde68a;
        --color-danger: #b42318;
        --color-danger-ink: #991b1b;
        --color-danger-subtle: #fee2e2;
        --color-danger-border: #fecaca;
        --color-focus: #d97706;
        --color-on-primary: #ffffff;
        --color-skeleton-shimmer: rgba(255, 255, 255, 0.72);
        --color-scrim: rgba(15, 23, 42, 0.62);

        /* Spacing */
        --space-0: 0;
        --space-2: 2px;
        --space-4: 4px;
        --space-6: 6px;
        --space-8: 8px;
        --space-12: 12px;
        --space-16: 16px;
        --space-20: 20px;
        --space-24: 24px;
        --space-32: 32px;
        --space-40: 40px;
        --space-48: 48px;
        --space-64: 64px;
        --page-gutter: var(--space-16);
        --admin-canvas-max: 1440px;

        /* Radius and elevation */
        --radius-sm: 6px;
        --radius-control: 8px;
        --radius-card: 12px;
        --radius-prominent: 16px;
        --radius-pill: 999px;
        --elevation-0: none;
        --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06);
        --elevation-2: 0 6px 18px rgba(15, 23, 42, 0.10);
        --elevation-overlay: 0 18px 48px rgba(15, 23, 42, 0.18);

        /* Layers */
        --z-base: 0;
        --z-sticky: 20;
        --z-topbar: 40;
        --z-navigation: 50;
        --z-sheet: 100;
        --z-modal: 200;
        --z-toast: 300;
        --z-skip-link: 400;

        /* Motion */
        --motion-duration-instant: 0ms;
        --motion-duration-feedback: 120ms;
        --motion-duration-standard: 150ms;
        --motion-duration-drawer: 220ms;
        --motion-duration-spinner: 800ms;
        --motion-duration-spinner-reduced: 1600ms;
        --motion-duration-skeleton: 1300ms;
        --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
        --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

        /* Named reference values. CSS media queries use the matching literal values below. */
        --breakpoint-compact: 37.5rem;  /* 600px */
        --breakpoint-medium: 52.5rem;  /* 840px */
        --breakpoint-expanded: 64rem;  /* 1024px */
        --breakpoint-wide: 75rem;      /* 1200px */
        --control-min-block-size: 44px;
        --icon-control-size: 40px;   /* visual box; the hit area is --touch-target-min */
        --touch-target-min: 44px;
        --row-block-size: 48px;      /* default row (FR-009) */
        --row-header-block-size: 40px;
        --card-padding: var(--space-16);
    }
}

@layer spec043.foundation {
    :where(html) {
        color-scheme: light;
        font-family: var(--font-admin);
        text-size-adjust: 100%;
    }

    :where(body) {
        min-inline-size: 20rem;
    }

    :where(button, input, select, textarea) {
        font: inherit;
    }

    :where(img, svg, video, canvas) {
        max-inline-size: 100%;
    }

    :where([dir='ltr'], .bidi-isolate, [data-bidi-isolate]) {
        unicode-bidi: isolate;
    }

    :where(.numeric, [data-numeric]) {
        font-variant-numeric: tabular-nums;
    }

    @media (min-width: 37.5rem) {
        :root { --page-gutter: var(--space-24); }
    }

    @media (min-width: 64rem) {
        :root { --page-gutter: var(--space-32); }
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            --motion-duration-feedback: 0ms;
            --motion-duration-standard: 0ms;
            --motion-duration-drawer: 0ms;
        }
    }

    /* FR-009 density scopes. Density changes GEOMETRY only: row/card size move, while the type
       floor and the touch/target minimums stay exactly where the accessibility rules put them. */
    .ds-density--compact {
        --row-block-size: 40px;
        --card-padding: var(--space-12);
    }

    .ds-density--comfortable {
        --row-block-size: 56px;
        --card-padding: var(--space-20);
    }

    /* The named middle setting. It restates the :root values rather than being absent, so a
       component can always write `ds-density--{value}` for any allowed density without one of the
       three silently resolving to "no class". */
    .ds-density--default {
        --row-block-size: 48px;
        --card-padding: var(--space-16);
    }

    /* Deterministic reduced-motion scope for the internal state gallery and visual baselines:
       the same token overrides the media query applies, without depending on OS settings. */
    .ds-motion--reduced {
        --motion-duration-feedback: 0ms;
        --motion-duration-standard: 0ms;
        --motion-duration-drawer: 0ms;
    }
}