/*
 * Global design system tokens.
 *
 * This file contains variables only. Future pages and CMS templates should use
 * these same tokens and components so the full website appearance can be tuned
 * from one place.
 */

:root {
    /* Typography */
    --font-family: "Uncut Sans", Arial, Helvetica, sans-serif;

    --font-size-xs: 0.72rem;
    --font-size-s: 0.78rem;
    --font-size-m: 14.5px;
    --font-size-l: 1.25rem;

    --font-weight-normal: 500;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --line-height: 1.4;

    /* Colors */
    --color-background: #f2f2f2;
    --color-surface: rgba(255, 255, 255, 0.94);
    --color-surface-hover: #111;
    --color-text: #111;
    --color-text-secondary: #666;
    --color-border: rgba(0, 0, 0, 0.12);
    --color-focus: currentColor;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --color-shadow-strong: rgba(0, 0, 0, 0.12);
    --color-hover-text: #fff;

    /* Opacity */
    --opacity-hover: 0.7;

    /* Radius */
    --radius-small: 0.35rem;
    --radius-medium: 0.875rem;
    --radius-large: 999px;

    /* Spacing */
    --space-xs: 0.35rem;
    --space-s: 0.65rem;
    --space-m: 0.85rem;
    --space-l: 1rem;
    --space-xl: 2rem;

    /* Layers */
    --layer-panel: 10;
    --layer-debug: 20;

    /* Motion */
    --transition-fast: 160ms;
    --transition-normal: 240ms;
    --transition-slow: 360ms;
    --ease-default: ease;

    /* Reusable components */
    --panel-width: min(18rem, calc(100vw - (var(--space-l) * 2)));
    /* Global UI margin for corner elements */
    --ui-margin: var(--space-l);
    --panel-offset: var(--ui-margin);
    --panel-padding: var(--space-m);
    --panel-background: var(--color-surface);
    --panel-radius: var(--radius-medium);
    --panel-shadow: 0 0.5rem 2rem var(--color-shadow);
    --panel-blur: blur(10px);
    --indicator-size: 44px;
    --overlay-gap: var(--space-s);

    /* Indicator (bottom-left) */
    --indicator-icon-size: 0.9rem;
    --indicator-transition-duration: 300ms;

    /* BUTTON TYPOGRAPHY */
    --button-font-family: var(--font-family);
    --button-font-size: 0.7rem;
    --button-font-weight: var(--font-weight-normal);
    --button-letter-spacing: 0.04em;
    --button-line-height: 1;
    --button-text-transform: uppercase;
    --button-text-offset-y: 1px;

    /* BUTTON SPACING */
    --button-padding-x: var(--panel-padding);
    --button-padding-y: var(--panel-padding);

    /* BUTTON APPEARANCE */
    --button-background: var(--panel-background);
    --button-background-hover: var(--color-surface-hover);
    --button-container-background: transparent;
    --button-container-shadow: none;
    --button-container-backdrop-filter: none;
    --button-text-color: var(--color-text);
    --button-text-color-hover: var(--color-hover-text);
    --button-border-width: 1px;
    --button-border-color: var(--color-border);
    --button-border-radius: var(--panel-radius);
    --button-shadow: var(--panel-shadow);
    --button-backdrop-filter: var(--panel-blur);

    /* BUTTON ANIMATION */
    --button-transition-duration: var(--transition-fast);
    --button-transition-easing: var(--ease-default);
    --button-transition-delay-none: 0s;
    --button-expand-duration: var(--transition-normal);
    --button-expand-offset: var(--space-l);

    /* BUTTON ARROW */
    --button-arrow-size: 0.95em;
    --button-arrow-spacing: var(--space-xs);
    --button-arrow-offset: 6px;

    --focus-outline-width: 1px;
    --focus-outline-offset: 2px;
    --gallery-focus-outline-width: 2px;
    --gallery-focus-outline-offset: -2px;

    --heading-margin-bottom: 0.5rem;
    --debug-max-height: 45vh;
    --debug-note-margin-bottom: 0.75rem;
    --debug-table-padding-y: 0.45rem;
    --debug-table-padding-x: 0.6rem;
}