/*!
 * Shahoosh design tokens — Phase 2.1
 * ---------------------------------------------------------------------------
 * Single source of truth for colour, type, spacing, radius and motion.
 * Nothing outside this file may declare a raw hex colour or a raw pixel radius.
 *
 * PROVENANCE OF EVERY VALUE
 *   [FIGMA]    sampled or measured from the exports in reports/figma-reference/
 *              and recorded in reports/26-figma-design-system.md
 *   [DECISION] not defined in Figma; chosen here as a conservative value
 *              compatible with the visible design. Every one is listed in
 *              reports/34-phase21-trade-pilot.md so it can be replaced once the
 *              designer supplies the real value.
 *
 * RTL: this file uses logical properties only. There is no `left` or `right`.
 */

/* ------------------------------------------------------------------ fonts */
/* One canonical face, four weights. The platform previously shipped 89 font
   files for 9 distinct faces; this is the consolidated set. */
@font-face{
  font-family:'YekanBakh';
  src:url('../assets/fonts/YekanBakh-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'YekanBakh';
  src:url('../assets/fonts/YekanBakh-SemiBold.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'YekanBakh';
  src:url('../assets/fonts/YekanBakh-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'YekanBakh';
  src:url('../assets/fonts/YekanBakh-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  /* ---------------------------------------------------------- brand [FIGMA] */
  --sh-brand:          #431EAB;   /* primary buttons, both themes            */
  --sh-brand-hover:    #3A189A;   /* [DECISION] -8% lightness                */
  --sh-brand-active:   #33148A;   /* [DECISION]                              */
  --sh-accent:         #6C3AE1;   /* user bubble, loading placeholder        */
  /* Brand/accent used as TEXT needs its own value per theme. --sh-brand is a
     button FILL ("both themes" above is true for a fill behind white text); as
     a foreground on a dark surface it measured 1.73:1. These two tokens carry
     the brand tint at a readable luminance in each theme. */
  --sh-brand-text:     #431EAB;   /* = --sh-brand in light                   */
  --sh-accent-text:    #6C3AE1;   /* = --sh-accent in light                  */
  --sh-gold:           #FBCF2E;   /* subscribe CTA + premium model dot       */
  --sh-gold-strong:    #FFD62E;

  /* ------------------------------------------------- light surfaces [FIGMA] */
  --sh-bg:             #FAF8FF;
  --sh-surface:        #FFFFFF;
  --sh-surface-2:      #F4EFFE;
  --sh-surface-3:      #F3EDFD;
  --sh-surface-4:      #EEE7FD;

  /* ------------------------------------------------------- text [DECISION]  */
  /* Figma carries no text colours that could be sampled reliably from
     anti-aliased Persian glyphs. These are conservative neutrals tuned to
     meet WCAG AA on --sh-surface. */
  --sh-text:           #1B1033;
  --sh-text-muted:     #6B6383;
  --sh-text-faint:     #6A6280;   /* was #9A93AE: 2.43:1 on the raised surface */
  --sh-text-on-brand:  #FFFFFF;
  --sh-text-on-gold:   #2A1A00;

  /* ----------------------------------------------------- borders [DECISION] */
  --sh-border:         #E7E0F6;
  --sh-border-strong:  #D5CBEE;
  --sh-focus-ring:     #6C3AE1;

  /* ---------------------------------------------------- semantic [DECISION] */
  /* Figma defines no error/success/warning colour anywhere in 89 files.
     These are the minimum needed for the failure UI required by Phase 2.1. */
  --sh-danger:         #C0334B;
  --sh-danger-bg:      #FDEDF0;
  --sh-danger-border:  #F3C7D0;
  --sh-warn:           #9A6B00;
  --sh-warn-bg:        #FFF6E0;
  --sh-warn-border:    #F0DCA8;
  --sh-ok:             #1F7A55;
  --sh-ok-bg:          #E8F7F0;
  --sh-ok-border:      #BFE6D5;

  /* ------------------------------------------------------- radius [FIGMA]  */
  --sh-radius-card:    25px;  /* measured on the header card corner arc      */
  --sh-radius-panel:   20px;  /* [DECISION] slightly tighter for inner cards */
  --sh-radius-field:   14px;  /* [DECISION]                                  */
  --sh-radius-pill:    999px; /* [FIGMA] all chips and buttons are pills     */

  /* ------------------------------------------------------ layout  [FIGMA]  */
  --sh-gutter:         40px;  /* measured: header card starts at x=40        */
  --sh-header-h:       85px;  /* measured                                    */
  --sh-content-max:    990px; /* measured composer card width                */
  --sh-control-h:      42px;  /* measured primary button height              */
  --sh-drawer-w:       360px; /* [DECISION] measured ≈ 355–365 across frames  */

  /* ----------------------------------------------------- spacing [DECISION]*/
  /* No spacing scale could be proven from flat imagery. A 4px base rhythm is
     used because every measured gap is a multiple of 4. */
  --sh-space-1:        4px;
  --sh-space-2:        8px;
  --sh-space-3:        12px;
  --sh-space-4:        16px;
  --sh-space-5:        20px;
  --sh-space-6:        24px;
  --sh-space-8:        32px;
  --sh-space-10:       40px;

  /* -------------------------------------------------- typography [DECISION]*/
  /* Figma exports carry no font names or sizes. YekanBakh is the platform's
     existing Persian face (116 references vs 7 for Vazirmatn) and is visually
     consistent with the export. Sizes are a conservative 1.125 scale. */
  --sh-font:           'YekanBakh', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --sh-font-latin:     'YekanBakh', ui-sans-serif, system-ui, sans-serif;
  --sh-fs-xs:          12px;
  --sh-fs-sm:          13px;
  --sh-fs-base:        15px;
  --sh-fs-md:          17px;
  /* R5.7 — the size an EDITABLE control renders its own text at.
     iOS Safari auto-zooms a focused form control whose rendered font-size is
     under 16px, so this is a functional floor, not a typographic choice. It is
     deliberately a separate token from --sh-fs-base: label, helper and badge
     text stays at 15/13px, because none of them can take focus and none of them
     can trigger the zoom. It is NOT reduced in the 640px block below — a
     breakpoint that shrank it would reintroduce the defect on the narrowest
     phones, which is exactly how the auth pages hit it at 360px. */
  --sh-fs-input:       16px;
  --sh-fs-lg:          20px;
  --sh-fs-xl:          26px;
  --sh-lh-tight:       1.35;
  --sh-lh-base:        1.75;   /* Persian needs more leading than Latin      */
  --sh-fw-regular:     400;
  --sh-fw-medium:      500;
  --sh-fw-bold:        700;
  --sh-fw-black:       800;

  /* ---------------------------------------------- composer chips [FIGMA] */
  /* Sampled from the unified-video composer frames (Shahoosh-Ai-Chat(1)/(2)).
     The chat composer uses its own chip surfaces, distinct from the card. */
  /* ---- prompt well -------------------------------------------------------
     The prompt textarea painted transparent on the card, so its usable area
     had no perceivable boundary. It now sits in its own recessed well. Tinted
     toward the card's purple rather than a neutral grey, so it reads as part
     of the design language and not as a default HTML textarea. */
  /* selected media, measured from the Figma attachment frames at @2x */
  --sh-media-prev-size:        50px;
  --sh-media-prev-radius:      13px;
  --sh-media-prev-badge:       26px;
  --sh-media-prev-badge-radius:8px;
  --sh-media-prev-badge-bg:    #FFFFFF;
  --sh-media-prev-badge-fg:    #431EAB;

  --sh-prompt-bg:      #FBF9FF;
  --sh-prompt-bd:      #E7E0F6;
  --sh-prompt-bd-hover:#D5CBEE;
  --sh-prompt-bd-focus:#6C3AE1;
  --sh-prompt-ring:    rgba(108, 58, 225, .16);

  /* Gap between conversation content and the composer below it. Scales with
     viewport height instead of being one fixed value. */
  --sh-thread-gap:     clamp(20px, 3.2vh, 40px);

  --sh-chip-bg:        #F3F4F6;   /* upload chips, mic                        */
  --sh-chip-group:     #F3F4F6;   /* keyframe group wrapper                   */
  --sh-chip-inner:     #FFFFFF;   /* pills inside the group                   */
  --sh-chip-raised:    #FFFFFF;   /* «تنظیمات ویدیو» pill                     */
  --sh-chip-raised-bd: #E5E7EB;
  --sh-chip-icon:      #431EAB;   /* chip icons are brand-tinted              */

  /* --------------------------------------- composer geometry [FIGMA] ----- */
  --sh-chip-h:         36px;   /* upload chip height          (measured)      */
  --sh-chip-set-h:     34px;   /* settings pill height        (measured)      */
  --sh-chip-group-h:   44px;   /* keyframe group height       (measured)      */
  --sh-mic-size:       38px;   /* mic button                  (measured)      */
  --sh-gen-w:         120px;   /* generate button width       (measured)      */
  --sh-gen-h:          43px;   /* generate button height      (measured)      */
  --sh-gen-radius:     14px;   /* [DECISION] arc reads ~8–14; 14 matches      */
  --sh-composer-pad:   22px;   /* card inner padding          (measured)      */
  --sh-row-gap:        12px;   /* gap between action-row items (measured ~12) */

  /* ------------------------------------- header controls [FIGMA 2.2.2] --- */
  /* Light: account is a white pill with a light purple border; the icon
     circles share that border. Dark overrides fill the account pill. */
  --sh-account-bg:     #FFFFFF;
  --sh-account-fg:     #2E1065;
  --sh-account-bd:     #EADFF5;
  --sh-iconcircle-bd:  #EADFF5;
  --sh-iconcircle-fg:  #6D28D9;

  /* ---------------------------------------------------- elevation [DECISION]*/
  /* The design separates cards by contrast, not shadow. Shadows are kept
     deliberately faint so the card system stays flat as drawn. */
  --sh-shadow-card:    0 1px 2px rgba(27,16,51,.04), 0 8px 24px rgba(27,16,51,.06);
  --sh-shadow-pop:     0 12px 40px rgba(27,16,51,.14);

  /* ------------------------------------------------------- motion [DECISION]*/
  /* Not defined in Figma. Short, unobtrusive defaults. */
  --sh-dur-fast:       120ms;
  --sh-dur-base:       200ms;
  --sh-ease:           cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* ------------------------------------------------------------- dark theme */
/* Role-swap of the same palette. Figma draws every screen in both themes and
   every dark value below was sampled from those frames. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sh-bg:            #1C022A;
    --sh-surface:       #26023A;
    --sh-surface-2:     #27033B;
    --sh-surface-3:     #34034E;
    --sh-surface-4:     #33054C;

    --sh-text:          #F3EEFB;   /* [DECISION] */
    --sh-text-muted:    #B9AFD0;   /* [DECISION] */
    --sh-text-faint:    #8C82A6;   /* [DECISION] */

    --sh-border:        #3A1657;   /* [DECISION] */
    --sh-border-strong: #4B2270;   /* [DECISION] */

    --sh-account-bg:     #431EAB;
    --sh-account-fg:     #FFFFFF;
    --sh-account-bd:     #431EAB;
    --sh-iconcircle-bd:  #431EAB;
    --sh-iconcircle-fg:  #E9D5FF;

    --sh-account-bg:   #431EAB;
  --sh-account-fg:   #FFFFFF;
  --sh-account-bd:   #431EAB;
  --sh-iconcircle-bd:  #431EAB;
  --sh-iconcircle-fg:  #E9D5FF;

  --sh-media-prev-badge-bg:    #FFFFFF;
  --sh-media-prev-badge-fg:    #431EAB;

  --sh-prompt-bg:      #1E0230;
  --sh-prompt-bd:      #3A1657;
  --sh-prompt-bd-hover:#4B2270;
  --sh-prompt-bd-focus:#7C4DFF;
  --sh-prompt-ring:    rgba(124, 77, 255, .22);

  --sh-chip-bg:        #1A0128;
    --sh-chip-group:     #250039;
    --sh-chip-inner:     #1A0128;
    --sh-chip-raised:    #34034E;
    --sh-chip-raised-bd: #4C0572;
    --sh-chip-icon:      #B59AFF;
    --sh-brand-text:     #B59AFF;   /* brand tint, readable on dark surfaces   */
    --sh-accent-text:    #B59AFF;

    --sh-danger:        #FF8FA3;   /* [DECISION] */
    --sh-danger-bg:     #3A0E1C;
    --sh-danger-border: #632134;
    --sh-warn:          #FFD06B;
    --sh-warn-bg:       #3A2A06;
    --sh-warn-border:   #5E4713;
    --sh-ok:            #6FE0B0;
    --sh-ok-bg:         #0D3A2A;
    --sh-ok-border:     #1C5C45;

    --sh-shadow-card:   0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
    --sh-shadow-pop:    0 12px 40px rgba(0,0,0,.5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --sh-bg:            #1C022A;
  --sh-surface:       #26023A;
  --sh-surface-2:     #27033B;
  --sh-surface-3:     #34034E;
  --sh-surface-4:     #33054C;

  --sh-text:          #F3EEFB;
  --sh-text-muted:    #B9AFD0;
  --sh-text-faint:    #8C82A6;

  --sh-border:        #3A1657;
  --sh-border-strong: #4B2270;

  --sh-media-prev-badge-bg:    #FFFFFF;
  --sh-media-prev-badge-fg:    #431EAB;

  --sh-prompt-bg:      #1E0230;
  --sh-prompt-bd:      #3A1657;
  --sh-prompt-bd-hover:#4B2270;
  --sh-prompt-bd-focus:#7C4DFF;
  --sh-prompt-ring:    rgba(124, 77, 255, .22);

  --sh-chip-bg:    #1A0128;
  --sh-chip-group:   #250039;
  --sh-chip-inner:   #1A0128;
  --sh-chip-raised:  #34034E;
  --sh-chip-raised-bd: #4C0572;
  --sh-chip-icon:    #B59AFF;
  --sh-brand-text:    #B59AFF;   /* brand tint, readable on dark surfaces */
  --sh-accent-text:   #B59AFF;

  --sh-danger:        #FF8FA3;
  --sh-danger-bg:     #3A0E1C;
  --sh-danger-border: #632134;
  --sh-warn:          #FFD06B;
  --sh-warn-bg:       #3A2A06;
  --sh-warn-border:   #5E4713;
  --sh-ok:            #6FE0B0;
  --sh-ok-bg:         #0D3A2A;
  --sh-ok-border:     #1C5C45;

  --sh-shadow-card:   0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --sh-shadow-pop:    0 12px 40px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ---------------------------------------------------------- responsive */
/* Figma defines exactly two viewports: 1920 and 390. Everything between is an
   implementation decision, marked [DECISION] and never presented as design. */
@media (max-width: 1024px){          /* [DECISION] tablet                    */
  :root{
    --sh-gutter:      20px;
    --sh-content-max: 100%;
    --sh-drawer-w:    320px;
  }
}
@media (max-width: 640px){           /* [FIGMA] 390-based mobile             */
  :root{
    --sh-gutter:      12px;
    --sh-header-h:    64px;
    --sh-radius-card: 20px;
    --sh-fs-xl:       22px;
    --sh-fs-lg:       18px;
  }
}