/* Hamilku design tokens — shared semantic system (MD3-inspired) */

:root {
    /* Brand — override per persona in app.css */
    --brand-primary: #169873;
    --brand-primary-hover: #148D6C;
    --brand-on-primary: #ffffff;

    /* Semantic color roles */
    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-hover);
    --color-on-primary: var(--brand-on-primary);
    --color-primary-container: color-mix(in srgb, var(--brand-primary) 12%, white);
    --color-on-primary-container: var(--brand-primary-hover);

    --color-surface: #ffffff;
    --color-on-surface: #212529;
    --color-surface-variant: #f5f5f5;
    --color-on-surface-variant: #656565;

    --color-error: #DC3545;
    --color-on-error: #ffffff;
    --color-error-container: #fce8ea;

    --color-outline: #cfcfcf;
    --color-outline-variant: #e1e1e1;
    --color-muted: #979797;
    --color-scrim: rgba(0, 0, 0, 0.45);

    /* Legacy aliases (deprecated — use semantic tokens) */
    --primer: var(--color-primary);
    --abang: var(--color-error);
    --ireng: var(--color-on-surface);
    --colorDefault: var(--color-primary);
    --defaultPrimer: var(--color-primary);
    --defaultSecondary: var(--color-primary-hover);
    --colorPrimer: var(--color-on-primary);
    --colorDanger: var(--color-error);
    --dangerPrimer: var(--color-error);
    --dangerSecondary: #C82333;
    --colorWhite: var(--color-muted);
    --whitePrimer: var(--color-surface);
    --whiteSecondary: var(--color-surface-variant);

    /* Forum accent */
    --frPink: #C75758;
    --frLightPink: #D47B7D;
    --frKuning: #E6C200;

    /* Spacing — 4px base, 8dp grid */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --type-display-sm: 600 1.5rem/1.3 var(--font-family);
    --type-title-lg: 600 1.25rem/1.4 var(--font-family);
    --type-title-md: 600 1rem/1.5 var(--font-family);
    --type-title-sm: 600 0.875rem/1.45 var(--font-family);
    --type-body-lg: 400 1rem/1.5 var(--font-family);
    --type-body-md: 400 0.875rem/1.45 var(--font-family);
    --type-body-sm: 400 0.75rem/1.4 var(--font-family);
    --type-label-md: 600 0.875rem/1.25 var(--font-family);
    --type-label-sm: 600 0.75rem/1.2 var(--font-family);

    /* Shape */
    --shape-none: 0;
    --shape-xs: 4px;
    --shape-sm: 8px;
    --shape-md: 12px;
    --shape-lg: 16px;
    --shape-xl: 28px;
    --shape-full: 9999px;

    /* Elevation */
    --elevation-0: none;
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12);
    --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.14);
    --elevation-3: 0 4px 12px rgba(0, 0, 0, 0.15);
    --elevation-4: 0 8px 18px rgba(58, 58, 58, 0.15);
    --elevation-5: 0 -5px 20px rgba(0, 0, 0, 0.08);

    /* Motion */
    --motion-duration-short: 200ms;
    --motion-duration-medium: 300ms;
    --motion-duration-long: 400ms;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --touch-target-min: 44px;
    --nav-height: calc(var(--touch-target-min, 44px) + 1.85rem + env(safe-area-inset-bottom, 0px));
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary);

    /* Dialog / sheet */
    --dialog-scrim: var(--color-scrim);
    --dialog-radius-sheet: var(--shape-xl) var(--shape-xl) 0 0;
    --dialog-radius-modal: var(--shape-md);
}