/*
 * CloudSnap design tokens. The one place a colour, size, radius, shadow or
 * duration is defined; every surface of cloudsnap.cloud imports this file first
 * and never redeclares a token. DESIGN.md at the repo root explains each value;
 * change the two together.
 *
 * Theme: one, light. Warm paper grounds stepped by about 2 % lightness, graphite
 * ink, the logo's terminal teal as the single signal (a stroke or a tinted plane,
 * never a solid plane), the brand green reserved for what is running or settled.
 * No plane is deep or dark; the loading skeleton is the dashed wireframe of the
 * component; product frames carry corner marks. There is no dark theme and no
 * theme attribute; the dark system of 2026-10-07 lives only in git history.
 * Type: Mukta for Latin text, body and titles alike, Nabla for the home headline
 * only (a colour font whose vendored file is recoloured to the teal, with the
 * --cs-hero palette below repeating it), Dana (variable) for Persian, Libre Barcode
 * 39 Text for one quiet footer line on each surface, the platform monospace for
 * machine strings. Mukta, Nabla, the barcode face (SIL OFL) and Dana (FontIran
 * licence) are vendored with their licence files.
 * Language: `lang="fa"` (or any fa-* / ar-*) swaps the type families, turns on Dana's
 * equal-width digits and resets casing, tracking and leading; `lang="ru"` swaps the
 * sans only.
 * Direction: layout uses logical properties; motion multiplies every horizontal
 * distance by --inline-sign, which flips under dir="rtl".
 * Density: `data-density="compact|comfortable"` on a region retunes row height and
 * the three spacing roles; the default is the customer dashboard's.
 * Ratios quoted below are WCAG 2.x, computed, in the order bg / surface / sunken.
 */

@font-face {
  font-family: 'Mukta';
  src: url('./fonts/Mukta-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Mukta';
  src: url('./fonts/Mukta-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Mukta';
  src: url('./fonts/Mukta-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nabla';
  src: url('./fonts/Nabla-VF.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Barcode 39 Text';
  src: url('./fonts/LibreBarcode39Text-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('./fonts/DanaVF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Colour: one warm neutral family (paper), soft steps ---- */
  --bg:             #F5F2EC;
  --surface:        #FCFAF6;
  --surface-raised: #FCFAF6;
  --surface-sunken: #ECE8E0;
  --surface-hover:  rgba(51, 48, 43, .04);
  --overlay:        rgba(51, 48, 43, .28);

  --ink:          #33302B;   /* 11.8 / 12.6 / 10.8; warm graphite, never black */
  --ink-muted:    #625D55;   /* 5.8 / 6.3 / 5.3, and 5.1 or better on every tint */
  --ink-faint:    #67625A;   /* 5.4 / 5.8 / 5.0 */
  --ink-disabled: var(--ink-faint);
  --ink-inverse:  #F5F2EC;   /* the mark on a checked control, 11.8:1 on --ink */

  --border:        rgba(51, 48, 43, .12);  /* the hairline, about 1.2:1 */
  --border-strong: #857F76;                /* 3.6 / 3.8 / 3.3 */
  --float-border:  transparent;            /* a floating layer lifts with its shadow alone */

  --accent:        #2F8A99;  /* the logo's terminal teal as a stroke or thin plane: 3.6 / 3.9 / 3.3 */
  --accent-hover:  #348E9D;
  --accent-active: #2F8A99;
  --on-accent:     #33302B;  /* the label on a solid teal plane; the system draws none */
  --accent-ink:    #1C6773;  /* the teal as text and the focus ring: 5.8 / 6.2 / 5.3, 4.5 or better on every tint */
  --accent-soft:        #DDEEF1;  /* the tinted plane of the primary action and of a chosen item */
  --accent-soft-hover:  #CFE6EA;
  --accent-soft-active: #BFDDE3;

  --success:      #32703A;   --success-soft: #E3EFDD;   /* the brand green: running, live, settled */
  --warning:      #8C5A00;   --warning-soft: #F8EBD2;
  --danger:       #B23A3A;   --danger-soft:  #F6E0DC;
  --info:         #4A6490;   --info-soft:    #E3E8F2;   /* slate, because the teal is the signal */

  --grid-dot:     #D8D2C8;
  --shadow-color: rgba(51, 48, 43, .10);
  --line:         #9DB9BE;   /* decorative strokes only, never text */

  /* ---- Data series: five categorical slots validated on both chart surfaces;
          a sixth entity folds into "Other", the neutral ---- */
  --chart-1: #3D73B6;
  --chart-2: #9D4518;
  --chart-3: #7D5FAD;
  --chart-4: #767700;
  --chart-5: #9F5387;
  --chart-6: var(--chart-neutral);

  --ring-color: var(--accent-ink);
  --link-underline: var(--border-strong);
  --chart-neutral: var(--ink-muted);
  --chart-grid: var(--border);
  --chart-axis: var(--ink-faint);
  --chart-fill: 12%;

  /* ---- The primary action, the skeleton and the product frame ---- */
  --btn-primary-bg:        var(--accent-soft);
  --btn-primary-bg-hover:  var(--accent-soft-hover);
  --btn-primary-bg-active: var(--accent-soft-active);
  --btn-primary-fg:        var(--accent-ink);
  --btn-primary-border:    var(--accent);
  --skeleton-bg:           transparent;
  --skeleton-border:       var(--border-strong);
  --skeleton-style:        dashed;
  --mark-color:            var(--border-strong);  /* corner marks on a product frame in marketing and docs */
  --mark-size:             12px;

  /* ---- Type ---- */
  --font-sans:    'Mukta', 'Dana', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Mukta', 'Dana', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-hero:    'Nabla', 'Mukta', 'Dana', system-ui, 'Segoe UI', Roboto, sans-serif;  /* the home headline only */
  --font-barcode: 'Libre Barcode 39 Text', monospace;  /* one quiet line in the footer */
  --font-mono:    ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --numeric-features: normal;   /* 'ss03' on Persian pages: Dana's equal-width digits */
  --hero-depth:           100;  /* Nabla EDPT at rest (axis 0 to 200) */
  --hero-depth-hover:     200;  /* the hovered letter */
  --hero-highlight:       12;   /* Nabla EHLT at rest (axis 0 to 24) */
  --hero-highlight-hover: 24;
  --hero-lift:            -0.12em;  /* the hovered letter rises */
  --hero-lift-near:       -0.05em;  /* its two neighbours follow */
  --hero-tilt:            -4deg;    /* and it leans into the rise */
  /* The headline's colours: steps of the signal hue, darkest on the extruded walls,
     lightest on the sheen. The vendored Nabla file carries them as its default
     palette and SVG fallbacks; @font-palette-values below repeats them as literals,
     because a descriptor cannot read a custom property. */
  --hero-line:       #1C6773;   /* = --accent-ink; the thin dark edge lines (slot 0) */
  --hero-side:       #1C6773;   /* = --accent-ink; the left extrusion wall (slot 1) */
  --hero-top:        #25808F;   /* the top surfaces (slot 3) */
  --hero-face:       #2F8A99;   /* = --accent; the front face's lower stop (slots 2, 4, 6) */
  --hero-face-light: #5FA8B5;   /* the front face's upper stop (slot 7) */
  --hero-cap:        #9CCBD3;   /* the bottom end caps (slot 5) */
  --hero-sheen:      #DDEEF1;   /* = --accent-soft; the top sheen (slot 8) */
  --hero-edge:       #FCFAF6;   /* = --surface; the bright edge lines (slot 9) */

  --weight-regular: 400;
  --weight-strong:  500;
  --weight-display: 600;

  --text-xs:  0.75rem;   /* 12  eyebrows, column headers, badges, axis labels */
  --text-ui:  0.875rem;  /* 14  buttons, menu items, secondary text, dense cells */
  --text-base: 1rem;     /* 16  body, inputs */
  --text-md:  1.125rem;  /* 18  card and section titles */
  --text-lg:  1.375rem;  /* 22  dialog titles, marketing section titles */
  --text-xl:  1.75rem;   /* 28  app page titles, KPI values */
  --text-2xl: 2.25rem;   /* 36  the primary KPI value */
  --text-3xl: 3rem;      /* 48  marketing H2 */
  --text-4xl: 4rem;      /* 64  marketing H1 */
  --text-5xl: 5.5rem;    /* 88  the home hero */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.55;
  --leading-label: 1;
  --leading-code:  1.6;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.08em;
  --case-eyebrow: uppercase;
  --measure:      68ch;
  --measure-hint: 300px;

  /* ---- Space: the scale, then the roles every component uses ---- */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-128: 128px;

  --space-inset:   var(--sp-24);  /* padding inside a container */
  --space-within:  var(--sp-8);   /* between items of one group */
  --space-between: var(--sp-32);  /* between groups; at least 3x within */
  --space-section: var(--sp-96);  /* between marketing and docs sections */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         24px;
  --nav-h:          64px;
  --bottom-bar-h:   64px;
  --rail-w:         240px;
  --rail-w-collapsed: 64px;
  --drawer-w:       420px;
  --drawer-w-min:   320px;
  --dialog-w:       520px;
  --control-h:      40px;
  --control-h-sm:   32px;
  --row-h:          44px;
  --hit-min:        44px;
  --check-size:     18px;
  --toggle-w:       36px;
  --toggle-h:       20px;
  --icon:           20px;
  --icon-sm:        16px;

  /* ---- Shape ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-full: 999px;
  --bw: 1px;
  --ring-width:  2px;
  --ring-offset: 2px;
  --bracket-w:   2px;
  --bracket-arm: 8px;

  /* ---- Texture: the dot grid, the only pattern in the system ---- */
  --grid-pitch:    24px;
  --grid-dot-size: 1px;
  --grid-fade:     40%;

  /* ---- Elevation: in-flow surfaces are flat; only floating layers lift, softly ---- */
  --shadow-float: 0 8px 24px var(--shadow-color);

  /* ---- Motion: one duration scale sized by how much changes; the exit of any
          entrance is the band below it ---- */
  --dur-instant: 0ms;
  --dur-micro:   80ms;    /* hover, press, focus, colour */
  --dur-small:   150ms;   /* menus, popovers, tooltips, toast reflow */
  --dur-medium:  250ms;   /* dialogs, drawers, sheets, toggles, tab indicator, expand */
  --dur-large:   400ms;   /* route change, shared-element morph; the ceiling for one element */
  --dur-blink:   1000ms;  /* one caret cycle */
  --blink-count: 5;       /* the caret blinks this many times, then holds solid */
  --dur-shake:   320ms;   /* a wholly rejected entry, at most two oscillations */
  --dur-scroll:  600ms;   /* scroll restore, one decelerating move */
  --dur-highlight: 1200ms;/* how long a returned-to or newly inserted row stays marked */
  --stagger:     50ms;    /* delay = min(index, 6) x --stagger */
  --press-scale: 0.97;
  --caret-w:     0.6ch;

  --ease-out:    cubic-bezier(0.2, 0, 0, 1);      /* enter, settle, state change */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);      /* exit */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* travel between two positions, morph */
  --ease-linear: linear;                           /* countdown and progress fills only */
  --ease-pop:    cubic-bezier(0.2, 0.9, 0.3, 1.1); /* elements under 48px only */

  /* ---- Timers ---- */
  --loading-delay: 300ms;
  --tooltip-delay: 300ms;
  --toast-info:    4s;
  --toast-warning: 7s;
  --undo-window:   5s;
  --undo-window-bulk: 10s;

  /* ---- Layers (outside the browser top layer) ---- */
  --z-sticky:   10;
  --z-drawer:   20;
  --z-modal:    30;
  --z-dropdown: 40;
  --z-toast:    50;
  --z-tooltip:  55;
  --z-skip:     60;

  --inline-sign: 1;
  accent-color: var(--ink);
  font-synthesis-weight: none;
}

@font-palette-values --cs-hero {
  font-family: 'Nabla';
  base-palette: 0;
  override-colors:
    0 #1C6773,
    1 #1C6773,
    2 #2F8A99,
    3 #25808F,
    4 #2F8A99,
    5 #9CCBD3,
    6 #2F8A99,
    7 #5FA8B5,
    8 #DDEEF1,
    9 #FCFAF6;
}

[dir='rtl'] { --inline-sign: -1; }
[dir='ltr'] { --inline-sign: 1; }

[lang|='fa'],
[lang|='ar'] {
  --font-sans:    'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-hero:    'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Menlo, Consolas, 'Dana', monospace;
  --numeric-features: 'ss03';
  --leading-tight: 1.4;
  --leading-snug:  1.5;
  --leading-body:  1.8;
  --leading-label: 1.5;
  --tracking-display: 0;
  --tracking-eyebrow: 0;
  --case-eyebrow: none;
}

[lang|='ru'] {
  --font-sans:    system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

[data-density='compact'] {
  --row-h: 36px;
  --space-inset: var(--sp-16);
  --space-within: var(--sp-4);
  --space-between: var(--sp-16);
}
[data-density='comfortable'] {
  --row-h: 56px;
  --space-inset: var(--sp-32);
  --space-within: var(--sp-12);
  --space-between: var(--sp-48);
}

@media (pointer: coarse) {
  :root { --hit-min: 48px; }
  [data-density='compact'] { --row-h: var(--hit-min); }
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --space-inset: var(--sp-16);
    --space-section: var(--sp-64);
    --text-3xl: 2.25rem; /* 36 */
    --text-4xl: 2.75rem; /* 44 */
    --text-5xl: 3.25rem; /* 52 */
  }
  [data-density='comfortable'] {
    --space-inset: var(--sp-24);
    --space-between: var(--sp-32);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:   1ms;
    --dur-small:   1ms;
    --dur-medium:  1ms;
    --dur-large:   1ms;
    --dur-shake:   0ms;
    --dur-scroll:  0ms;
    --blink-count: 0;
    --stagger:     0ms;
    --press-scale: 1;
    --ease-pop:    var(--ease-out);
    --hero-depth-hover:     var(--hero-depth);
    --hero-highlight-hover: var(--hero-highlight);
    --hero-lift:            0em;
    --hero-lift-near:       0em;
    --hero-tilt:            0deg;
  }
}

@media (forced-colors: active) {
  :root {
    --ring-color: Highlight;
    --ink-disabled: GrayText;
    --border-strong: ButtonText;
    --link-underline: LinkText;
  }
}