/*
Theme Name: Caesarstone Digital Dashboard
Theme URI: https://digitaldashboard.kinsta.cloud
Description: Thin standalone theme for the Caesarstone sample-orders Digital Dashboard. Holds the design tokens and fonts copied from the Israel B2B orders portal (csordersil); the UI itself is rendered by the cs-orders-dashboard plugin.
Author: Caesarstone Digital
Version: 0.1.0
Requires PHP: 8.2
Text Domain: cs-dashboard
*/

/* ==========================================================================
   Fonts. Self-hosted, copied from the B2B portal theme (israel-b2b).
   Frutiger covers the Latin; every Hebrew glyph falls through to Heebo,
   because Frutiger has no Hebrew. Heebo is a variable font split by
   unicode-range so a Latin page never downloads the Hebrew file.
   ========================================================================== */

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Light.woff2') format('woff2'), url('assets/fonts/FrutigerLTPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Roman.woff2') format('woff2'), url('assets/fonts/FrutigerLTPro-Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Bold.woff2') format('woff2'), url('assets/fonts/FrutigerLTPro-Bold.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('assets/fonts/heebo-hebrew.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Heebo';
    src: url('assets/fonts/heebo-latin-ext.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Heebo';
    src: url('assets/fonts/heebo-latin.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    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;
}

/* ==========================================================================
   Design tokens. Copied verbatim from the B2B portal
   (israel-b2b/style.css, the FOUNDATION block) so the dashboard and the
   portal read as one brand. scripts/check-tokens.sh fails the build on a
   literal font-size, font-weight, text colour, border colour or radius
   outside this block.

   Size    14 / 16 / 20 / 32, by what a thing is, not where it sits:
             --cs-text-sm     14  a label, meta, a caption, a chip, a column heading
             --cs-text        16  body, a value, a button
             --cs-text-lg     20  a section or card title
             --cs-display-sm  32  the page's h1, once per page
           --cs-display (40) is the login brand panel's alone.
   Weight  400 text and labels, 500 buttons/links/chips/tabs, 700 titles and figures.
           A label is never bold: regular and muted, the value beside it carries the weight.
   Ink     Three, and they rank. Red is for a cancellation or an error, nothing else.
   Border  One: 1px of --line. Focus changes the colour to ink, never the width.
   Radius  4px for what you click or type into, 0 for a surface.
   No letter-spacing and no uppercase.
   ========================================================================== */

:root {
    --color-primary: var(--cs-black);
    --color-primary-light: #3d3d3b;
    --color-primary-dark: #000000;
    --color-secondary: #ffffff;
    --color-accent: var(--cs-black);

    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: var(--cs-black);

    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-error: #ef4444;

    --font-sans: 'Frutiger LT Pro', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Frutiger LT Pro', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-accent: var(--font-sans);
    --font-mono: 'Fira Code', 'Consolas', monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-base: 1.5;

    --ink: var(--cs-black);
    --ink-muted: #737373;   /* 4.7:1 on white */
    --ink-faint: #a3a3a3;   /* never the only carrier of something to read */
    --ink-danger: #b42318;  /* 6.5:1 on white; #ef4444 is a fill, not a text colour */
    --ink-success: #15803d; /* 4.6:1 on white; the text colour for a positive delta */

    --line: #e5e5e5;
    --line-danger: #fecdca;
    --border: 1px solid var(--line);

    --text-xs: var(--cs-text-sm);
    --text-sm: var(--cs-text-sm);
    --text-base: var(--cs-text);
    --text-md: var(--cs-text);
    --text-lg: var(--cs-text-lg);
    --text-xl: var(--cs-display-sm);

    --cs-black: #0b0b0d; /* sampled from the black marble slab */
    --cs-text-sm: 0.875rem;
    --cs-text: 1rem;
    --cs-text-lg: 1.25rem;
    --cs-display: 2.5rem;
    --cs-display-sm: 2rem;
    --cs-on-dark-muted: rgba(255, 255, 255, 0.8);
    --cs-muted: #6b6b68;
    --cs-line: #e5e5e3;
    --cs-paper: #f6f5f2;
    --cs-radius: 0;
    --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 60px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 4px;   /* chips and badges */
    --radius-md: 4px;   /* buttons, inputs, selects */
    --radius-lg: 0;     /* cards, panels, tables, media */
    --radius-xl: 0;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    --dashboard-max-w: 1600px;

    /* Extra steps of the type ladder for dense data UI: axis ticks, table
       meta, tile figures and the one hero number per view. */
    --cs-text-2xs: 0.6875rem;  /* 11  axis ticks */
    --cs-text-xs: 0.75rem;     /* 12  table meta, chips */
    --cs-text-md: 0.9375rem;   /* 15  table body */
    --cs-kpi: 1.75rem;         /* 28  stat-tile value */
    --cs-hero: 3rem;           /* 48  the hero figure, once per view */
    --fw-semibold: 600;
}

/* ==========================================================================
   Dark dashboard tokens, built only from the Caesarstone style guide
   (Figma "Style Guide & Components" colour styles):

     Black        #0D0D0D   ground
     Grey         #383838   hairlines, quiet surfaces, comparison marks
     Terracotta   #F46C42   the one accent: primary series, Brand, focus
     Light Grey 1 #EDEDEF   second series (Studio), neutral marks
     Light Grey 2 #F8F8F8   –
     Light Grey 3 #FBFBFB   primary text
     White        #FFFFFF   –
     Error        #CC1A1A   failure marks (text uses a lighter step, 5:1)
     Confirmation #269414   positive deltas and "sent" (4.7:1 on the surface)

   Few colours on purpose: everything is black, greys and white; terracotta
   carries emphasis; green and red only mean good and bad. Charts carry at
   most two coloured series (terracotta + light grey; ΔE 22 under CVD,
   26 normal vision, both ≥ 3:1 on the surface), the rest is grey.
   Text greys between the guide's steps are tints of Light Grey 1, chosen
   for WCAG contrast on the surface.
   ========================================================================== */

html.csdash-dark {
    color-scheme: dark;

    --cs-guide-black: #0d0d0d;
    --cs-guide-grey: #383838;
    --cs-guide-terracotta: #f46c42;
    --cs-guide-light-1: #ededef;
    --cs-guide-light-2: #f8f8f8;
    --cs-guide-light-3: #fbfbfb;
    --cs-guide-white: #ffffff;
    --cs-guide-error: #cc1a1a;
    --cs-guide-confirm: #269414;

    --d-bg: var(--cs-guide-black);
    --d-surface: rgba(20, 20, 20, 0.86);
    --d-surface-solid: #141414;
    --d-surface-2: #1b1b1b;
    --d-surface-3: #262626;
    --d-hover: rgba(237, 237, 239, 0.05);
    --d-press: rgba(237, 237, 239, 0.09);
    --d-line: rgba(237, 237, 239, 0.08);
    --d-line-strong: var(--cs-guide-grey);
    --d-grid: #222222;
    --d-axis: var(--cs-guide-grey);

    --d-ink: var(--cs-guide-light-3);
    --d-ink-2: #bdbdc1;   /* 9.8:1 */
    --d-ink-3: #9a9aa0;   /* 6.6:1 on the surface, 5.3:1 on surface-3 */
    --d-ink-4: #8a8a90;   /* 5.0:1 on surface-2: the faintest text */

    --d-accent: var(--cs-guide-terracotta);
    --d-accent-strong: #f68a68;
    --d-accent-soft: rgba(244, 108, 66, 0.13);
    --d-accent-line: rgba(244, 108, 66, 0.5);
    --d-focus: var(--cs-guide-terracotta);

    --d-series-1: var(--cs-guide-terracotta);  /* primary · Brand */
    --d-series-2: #d9d9dd;                     /* Light Grey 1 at 90% · Studio */
    --d-series-3: #8e8e93;
    --d-series-4: #6e6e73;
    --d-series-5: #55555a;
    --d-bar: #d9d9dd;                          /* single-series bars */
    --d-series-prev: #6e6e73;                  /* the comparison period */
    --d-series-other: #4a4a4f;                 /* "Other", "unknown", "none" */
    --d-series-1-wash: rgba(244, 108, 66, 0.13);
    --d-series-2-wash: rgba(217, 217, 221, 0.08);

    /* One-hue sequential ramp (terracotta) for heatmaps, near-surface → strong. */
    --d-seq-1: #1d1614;
    --d-seq-2: #33201a;
    --d-seq-3: #4f281c;
    --d-seq-4: #73331f;
    --d-seq-5: #9c4126;
    --d-seq-6: #c9542f;
    --d-seq-7: var(--cs-guide-terracotta);

    --d-good: #2fa31b;            /* Confirmation, one step lighter for small text */
    --d-good-soft: rgba(38, 148, 20, 0.16);
    --d-warn: var(--cs-guide-terracotta);
    --d-warn-soft: rgba(244, 108, 66, 0.13);
    --d-serious: var(--cs-guide-terracotta);
    --d-critical: #ec4b4b;        /* Error, lightened for text: 5.0:1 */
    --d-critical-mark: var(--cs-guide-error);
    --d-critical-soft: rgba(204, 26, 26, 0.16);
    --d-critical-line: rgba(204, 26, 26, 0.5);

    --d-shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(237, 237, 239, 0.08);
    --d-shadow-drawer: 0 0 80px rgba(0, 0, 0, 0.7);
    --d-scrim: rgba(5, 5, 5, 0.6);

    --d-bg-glass: rgba(13, 13, 13, 0.9);
    --d-ink-on-accent: var(--cs-guide-black);

    --rail-w: 76px;
    --bar-h: 64px;
    --radius-card: 0;
    --radius-ctl: 6px;
    --radius-pop: 10px;
    --radius-hair: 2px;
    --radius-pill: 9999px;
}

html.csdash-dark body {
    background: var(--d-bg);
    color: var(--d-ink);
}

@media (min-width: 768px) {
    :root {
        --header-h: 72px;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--cs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--ink);
    background: var(--color-gray-50);
    min-height: 100vh;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-light);
}

/* Email, code and number fields are always left-to-right, whatever the page direction. */
input[type="email"],
input[type="number"],
input[inputmode="numeric"],
.ltr {
    direction: ltr;
    text-align: start;
}

/* The SPA mounts here. The plugin's bundle brings its own component styles,
   all of them built from the tokens above. */
#csdash-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.csdash-noscript {
    max-width: 480px;
    margin: var(--space-12) auto;
    padding: var(--space-8);
    background: #fff;
    border: var(--border);
    text-align: center;
}