/*
| khodkasb — the brand layer. THE token file.
|
| Every colour and every typeface in this product is declared here and nowhere
| else. A hex code, an rgb() triplet or a font-family name written anywhere
| outside this file is a bug, and AC-BR-1 is proved by counting them to zero.
|
| The four values that came from the brand kit and are not derived from
| anything are these, and only these:
|
|     primary     #38BDF8
|     secondary   #4ECDC4
|     background  #F8FAFC
|     text        #0F172A
|
| Everything else on this page is arithmetic on those four. The greys are
| linear steps along the #0F172A -> #F8FAFC axis; the darker inks are the same
| axis continued past the text colour; the brand ramps are the two brand hues
| mixed toward the ink or toward white. No fifth brand colour is invented here,
| because a palette that grows one convenient shade at a time stops being a
| palette.
|
| The status hues (ok / warn / bad) are the exception and they are deliberately
| NOT brand colours: they exist to say "this worked", "look at this", "this
| failed" in a system message. They never stand in for the brand, and the brand
| never stands in for them.
*/

:root {
    /* ---------------------------------------------------------- the axis --
    | #0F172A -> #F8FAFC in linear steps. --ink-950 and below continue past
    | the text colour toward black, for the dark sign-in screen.
    */
    --ink-950: #080D17;   /* t = -0.45  the sign-in canvas */
    --ink-930: #0C1221;   /* t = -0.22  bottom of the sign-in card */
    --ink-900: #0F172A;   /* t = 0.00   THE text colour */
    --ink-870: #141C2E;   /* t = 0.02   top of the sign-in card */
    --ink-820: #1B2235;   /* t = 0.05 */
    --ink-700: #2B3243;   /* t = 0.12 */
    --ink-600: #49505F;   /* t = 0.25   muted text, 7.4:1 on the canvas */
    --ink-500: #6C727E;   /* t = 0.40   faint text, 4.9:1 on the canvas */
    --ink-400: #8F949E;   /* t = 0.55 */
    --ink-300: #B2B6BD;   /* t = 0.70 */
    --ink-200: #CED1D6;   /* t = 0.82 */
    --ink-150: #E1E3E7;   /* t = 0.90 */
    --ink-100: #ECEFF2;   /* t = 0.95 */
    --ink-050: #F8FAFC;   /* t = 1.00   THE background colour */
    --paper:   #FFFFFF;   /* the end of the axis: a raised surface on the canvas */

    /* ------------------------------------------------------- brand: sky --
    | #38BDF8 is a light colour. It is a FILL, and what sits on it is dark ink,
    | never white - white on it measures 1.9:1. --sky-700 is the same hue
    | pulled halfway to the ink so it can be text: 5.7:1 on the canvas.
    */
    --sky-300: #88D7FB;   /* sky + 40% white — glows and dark-screen text */
    --sky-500: #38BDF8;   /* THE primary. A fill. */
    --sky-700: #246A91;   /* sky + 50% ink — the primary as a word */

    /* ------------------------------------------------ brand: turquoise --
    | The secondary. It is the accent of the dark sign-in screen, which was
    | designed against a reference the user supplied; --teal-600 is the same
    | hue made dark enough to be read as text on the light canvas (4.7:1).
    */
    --teal-200: #9EE4DF;
    --teal-300: #7ADAD3;
    --teal-400: #4ECDC4;  /* THE secondary */
    --teal-600: #327B7F;

    /* ------------------------------------------------------------ status --
    | System messages only. Never a substitute for a brand colour.
    */
    --ok:        #12A150;
    --ok-ink:    #0B7A3B;
    --warn:      #E57A1A;
    --warn-ink:  #8A4B12;
    --warn-ink2: #9A3B0B;
    --warn-lift: #F2C08A;  /* the same warning, legible on the dark card */
    --bad:       #E5484D;
    --bad-lift:  #FF6670;  /* the same failure, legible on the dark card */

    /* ------------------------------------------------------ alpha channels --
    | Channel triplets, so a translucent tint can be written as
    | rgb(var(--sky-rgb) / .12) without a second copy of the colour appearing
    | in app.css. The alpha is a number, not a colour, so it may live there.
    */
    --ink-rgb:   15 23 42;
    --paper-rgb: 255 255 255;
    --black-rgb: 0 0 0;
    --sky-rgb:   56 189 248;
    --teal-rgb:  78 205 196;
    --ok-rgb:    18 161 80;
    --warn-rgb:  229 122 26;
    --bad-rgb:   229 72 77;

    /* ------------------------------------------------------------ roles --
    | What the rest of the stylesheet actually names. A rule in app.css asks
    | for a role, never for a colour: --surface, not "the light grey one".
    */
    --surface:      var(--ink-050);   /* the page */
    --bg:           var(--paper);     /* anything raised off the page */
    --sunken:       var(--ink-100);   /* a field at rest, a stat block */
    --text:         var(--ink-900);
    --text-muted:   var(--ink-600);
    --text-faint:   var(--ink-500);
    --border:       var(--ink-150);
    --border-strong: var(--ink-200);

    --accent:       var(--sky-500);   /* a fill: buttons, switches, the caret */
    --accent-on:    var(--ink-900);   /* what is written ON that fill */
    --accent-ink:   var(--sky-700);   /* the accent as text: links, active nav */
    --accent-soft:  var(--sky-300);

    --success: var(--ok);
    --danger:  var(--bad);

    /* -------------------------------------------------------------- type --
    | Self hosted, both of them. No CDN appears anywhere in this product and
    | that is architecture, not taste: for an Iranian visitor a foreign CDN is
    | slow at best and unreachable at worst, and the one page that would break
    | is the shopfront a seller pasted into their bio.
    |
    | Three weights on the whole site. The cap is four (AC-BR-3) and the reason
    | it is a cap at all is AC-04-6: every weight is another ~40 KB in front of
    | the largest element.
    |
    | The fallback face below is not decoration. Its metric overrides make the
    | system font occupy very nearly the space Vazirmatn will, so the swap when
    | the real file lands does not move anything on the page.
    */
    --font-body: 'Vazirmatn', 'Vazirmatn Fallback', system-ui, sans-serif;
    --font-heading: 'YekanBakh', 'Vazirmatn', 'Vazirmatn Fallback', system-ui, sans-serif;

    /* ------------------------------------------------------------ shape -- */
    --radius-input: 12px;
    --radius-card: 16px;
    --radius-pill: 999px;

    --shadow: 0 1px 2px rgb(var(--ink-rgb) / .04), 0 8px 24px rgb(var(--ink-rgb) / .06);

    /* Every transition in the product. Nothing is slower than 400ms. */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fast: 180ms;
    --slow: 260ms;
}

/* ------------------------------------------------------------------ faces --
| YekanBakh carries the headings and Vazirmatn carries everything a person
| reads a sentence of. Both are woff2 and nothing else; a woff or a ttf beside
| them would only ever be downloaded by a browser that cannot run the rest of
| this page anyway.
|
| font-display: swap on all three: the text is readable from the first paint
| and the real face replaces it when it arrives. It never blocks.
*/
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
| The heading face, at one weight.
|
| Every heading in this product is already bold, so a 400 cut would be a file
| nobody downloads a glyph from. If a lighter heading is ever wanted, that is a
| design decision plus a fourth file, and the budget has room for exactly one
| more.
|
| The FaNum cut renders digits as Persian digits. That is intentional: a
| heading with a number in it (a price in a card title, a count) has to match
| the Persian digits App\Support\Money already prints in the body.
*/
@font-face {
    font-family: 'YekanBakh';
    src: url('/fonts/YekanBakhFaNum-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Fallback';
    src: local('Tahoma'), local('Arial'), local('sans-serif');
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 28%;
    line-gap-override: 0%;
}