/*
-------------------------------------------------
  Codesla Emlak — design tokens
  The single source for colour, type, space, radius, elevation, motion and
  layers. Every panel stylesheet (style.css, panel.css) reads these; pages
  never hard-code values.

  Palette: Grafit · Kehribar. Contrast notes are measured against
  --ui-surface (#FFFEFB) unless stated otherwise.
-------------------------------------------------
*/

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../../fonts/codesla/instrument-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Palette (semantic roles) */
    --ui-background: #F2F1EE;
    --ui-surface: #FFFEFB;
    --ui-primary: #364152;
    --ui-accent: #B06B00;
    --ui-text: #242A34;
    --ui-muted: #696C72;
    --ui-border: #DADAD9;
    --ui-on-primary: #FFFFFF;
    --ui-on-accent: #000000;
    --ui-success: #226843;
    --ui-warning: #8C5A0A;
    --ui-danger: #B03836;

    /* Derived tones */
    --ui-text-secondary: #474C55;      /* body copy, table cells: 8.6:1 */
    --ui-primary-hover: #2A3341;       /* white on it: 12.7:1 */
    --ui-primary-pressed: #222A36;
    --ui-primary-soft: #EBEBEA;        /* primary text on it: 8.7:1 */
    --ui-accent-hover: #C27B12;        /* black on it: 6.1:1 (darker amber would drop black text below 4.5:1) */
    --ui-accent-text: #9A5D00;         /* accent used as normal-size text: 5.3:1 (raw accent is 4.2:1) */
    --ui-accent-on-primary: #E9A23B;   /* accent on graphite surfaces: 4.8:1 (raw accent is 2.4:1) */
    --ui-accent-soft: #F6ECDD;         /* accent-text on it: 4.6:1 */
    --ui-success-soft: #E4ECE5;        /* success on it: 5.6:1 */
    --ui-warning-soft: #F1EADE;        /* warning on it: 4.9:1 */
    --ui-danger-soft: #F6E6E3;         /* danger on it: 5.0:1 */
    --ui-success-hover: #1A5434;
    --ui-danger-hover: #922D2B;
    --ui-surface-sunken: #F7F6F2;      /* tonal panels inside a surface */
    --ui-surface-hover: #F4F3EF;
    --ui-surface-tint: #ECEAE4;        /* placeholders, skeletons */
    --ui-border-strong: #86888D;       /* form control edges: 3.5:1 on surface, 3.1:1 on background */
    --ui-focus: var(--ui-accent);      /* focus ring: 4.2:1 on surface, 3.8:1 on background */
    --ui-overlay: rgba(36, 42, 52, 0.55);

    /* Typography */
    --ui-font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 13px;
    --ui-font-size-base: 14px;
    --ui-font-size-md: 15px;
    --ui-font-size-lg: 17px;
    --ui-font-size-xl: 20px;
    --ui-font-size-2xl: 24px;
    --ui-font-size-3xl: 30px;
    --ui-font-size-kpi: 30px;
    --ui-weight-regular: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-line-height-tight: 1.25;
    --ui-line-height: 1.6;
    --ui-tracking-tight: -0.012em;

    /* Spacing (4 px grid, "ferah" density) */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 28px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    /* Radius: continuous (squircle) corners, scaled up below where supported */
    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 22px;
    --ui-radius-xl: 28px;
    --ui-radius-2xl: 32px;
    --ui-radius-pill: 999px;

    /* Control sizes */
    --ui-control-height: 48px;
    --ui-control-height-sm: 38px;
    --ui-control-padding-x: 16px;

    /* Elevation: opaque surfaces, tonal edges, very soft shadows */
    --ui-shadow-1: 0 1px 2px rgba(36, 42, 52, 0.05);
    --ui-shadow-2: 0 1px 2px rgba(36, 42, 52, 0.04), 0 10px 28px -16px rgba(36, 42, 52, 0.16);
    --ui-shadow-3: 0 2px 6px rgba(36, 42, 52, 0.06), 0 28px 56px -24px rgba(36, 42, 52, 0.32);
    --ui-focus-ring: 0 0 0 3px var(--ui-surface), 0 0 0 5px var(--ui-focus);

    /* Motion */
    --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ui-duration-fast: 120ms;
    --ui-duration: 180ms;
    --ui-duration-slow: 260ms;

    /* Layers */
    --ui-z-sidebar: 1001;
    --ui-z-topbar: 1000;
    --ui-z-dropdown: 1060;
    --ui-z-toast: 1090;
    --ui-z-preloader: 2000;

    /* Shell */
    --ui-sidebar-width: 272px;
    --ui-sidebar-collapsed-width: 88px;
    --ui-topbar-height: 84px;
    --ui-shell-gap: 16px;

    /* Bridge to the stylesheet's original variable names (style.css) */
    --navbar-bg: var(--ui-background);
    --footer-bg: var(--ui-background);
    --white-color: var(--ui-surface);
    --bg-white: var(--ui-surface);
    --bg-light: var(--ui-background);
    --off-white: var(--ui-surface-sunken);
    --heading-color: var(--ui-text);
    --body-font-color: var(--ui-text-secondary);
    --border-color: var(--ui-border);
    --border-color-2: var(--ui-border-strong);
    --primary-color: var(--ui-primary);
    --primary-hover-color: var(--ui-primary-hover);
    --primary-color-transparent: var(--ui-primary-soft);
    --secondary-color: var(--ui-accent-text);
    --secondary-hover-color: var(--ui-warning);
    --button-primary-color: var(--ui-primary);
    --button-hover-color: var(--ui-primary-hover);
    --red-color: var(--ui-danger);
    --danger-color: var(--ui-danger);
    --red-color-hover: var(--ui-danger-hover);
    --yellow-color: var(--ui-accent);
    --orange-color: var(--ui-accent-text);
    --green-color: var(--ui-success);
    --green-color-hover: var(--ui-success-hover);
    --body-font-family: var(--ui-font-sans);

    /* Bootstrap 5.2 root variables */
    --bs-body-font-family: var(--ui-font-sans);
    --bs-body-font-size: var(--ui-font-size-base);
    --bs-body-color: var(--ui-text-secondary);
    --bs-body-bg: var(--ui-background);
    --bs-border-color: var(--ui-border);
    --bs-border-radius: var(--ui-radius-sm);
    --bs-border-radius-sm: var(--ui-radius-xs);
    --bs-border-radius-lg: var(--ui-radius-md);
    --bs-primary: var(--ui-primary);
    --bs-primary-rgb: 54, 65, 82;
    --bs-secondary-rgb: 105, 108, 114;
    --bs-success: var(--ui-success);
    --bs-success-rgb: 34, 104, 67;
    --bs-warning: var(--ui-warning);
    --bs-warning-rgb: 140, 90, 10;
    --bs-danger: var(--ui-danger);
    --bs-danger-rgb: 176, 56, 54;
    --bs-info-rgb: 54, 65, 82;
    --bs-light-rgb: 247, 246, 242;
    --bs-dark-rgb: 36, 42, 52;
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}

/* Continuous corners: corner-shape draws a squircle, so the same radius reads
   smaller than a circular arc. Scale the radii up where it is supported so the
   visual size matches the border-radius fallback. */
@supports (corner-shape: squircle) {
    :root {
        --ui-radius-xs: 14px;
        --ui-radius-sm: 20px;
        --ui-radius-md: 27px;
        --ui-radius-lg: 38px;
        --ui-radius-xl: 48px;
        --ui-radius-2xl: 56px;
        --ui-corner-shape: squircle;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-duration-fast: 0ms;
        --ui-duration: 0ms;
        --ui-duration-slow: 0ms;
    }
}