/* ============================================================
   ФРИДОМ ИНВЕСТ — Core color & type tokens
   Investing mobile app (iOS). Purple brand + SF Pro type.
   Pair with fig-tokens.css (raw Figma iOS-system variables).
   ============================================================ */

/* ---------- SF Pro Display — self-hosted (uploaded brand fonts) ---------- */
@font-face { font-family:"SF Pro Display"; font-weight:100; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Ultralight.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:100; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-UltralightItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:200; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Thin.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:200; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-ThinItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Light.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:300; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-LightItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Regular.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-RegularItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Medium.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:500; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-MediumItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Semibold.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:600; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-SemiboldItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Bold.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-BoldItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Heavy.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:800; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-HeavyItalic.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/SF-Pro-Display-Black.otf') format('opentype'); }
@font-face { font-family:"SF Pro Display"; font-weight:900; font-style:italic; font-display:swap; src:url('fonts/SF-Pro-Display-BlackItalic.otf') format('opentype'); }

:root {
  /* ---------- BRAND PURPLE ---------- */
  --fi-purple:            #8F50E3;  /* primary brand purple            */
  --fi-purple-deep:       #643BDA;  /* deep end of CTA gradient        */
  --fi-purple-bright:     #A764FF;  /* bright accent / glow / focus    */
  --fi-purple-ink:        #833EDC;  /* purple used on text / links     */
  /* primary call-to-action gradient (pill buttons) */
  --fi-grad-cta:          linear-gradient(180deg, #9350EC 0%, #6C44DD 100%); /* @kind color */
  /* hero / cover gradient (deep purple -> dark navy) */
  --fi-grad-cover:        linear-gradient(135deg, #3D1A78 0%, #2A1B4D 45%, #2B2B38 100%); /* @kind color */
  /* soft lavern radial used behind feature cards */
  --fi-grad-lavender:     linear-gradient(160deg, #FAF6FF 0%, #F1EAFB 60%, #EDE3FB 100%); /* @kind color */

  /* ---------- LAVENDER NEUTRALS (tints of purple) ---------- */
  --fi-lavender-50:       #FCF9FF;  /* app background, lightest        */
  --fi-lavender-100:      #FAF6FF;  /* card / sheet background         */
  --fi-lavender-150:      #F6F3FA;  /* segmented-control track         */
  --fi-lavender-200:      #F3E9FF;  /* tag chip / selected fill        */
  --fi-lavender-border:   #EDE3FB;  /* hairline on lavender surfaces   */
  --fi-surface:           #FFFFFF;  /* card / panel surface (remaps to #181030 in dark) */

  /* ---------- SEMANTIC (iOS system colors) ---------- */
  --fi-green:             #34C759;  /* gains / "Доступен" / success    */
  --fi-red:               #FF3B30;  /* losses / destructive            */
  --fi-orange:            #FF9500;  /* "Про" badge, warnings           */
  --fi-orange-bright:     #FFA724;  /* "Про" gradient highlight        */
  --fi-orange-tint:       #FAE2BF;  /* orange chip background          */
  --fi-blue:              #007AFF;  /* iOS links / informational       */
  --fi-grad-pro:          linear-gradient(180deg, #FFA724 0%, #FF8A00 100%); /* @kind color */

  /* ---------- INK / TEXT ---------- */
  --fi-ink:               #000000;  /* primary label (iOS uses pure black) */
  --fi-ink-2:             rgba(60,60,67,0.60);   /* secondary label    */
  --fi-ink-3:             rgba(60,60,67,0.30);   /* tertiary / hint    */
  --fi-gray:              #8E8E93;  /* iOS systemGray placeholder      */
  --fi-gray-2:            #AEAEB2;  /* systemGray2                     */
  --fi-gray-5:            #E5E5EA;  /* systemGray5 separators          */
  --fi-gray-6:            #F2F2F7;  /* systemGray6 grouped bg          */
  --fi-white:             #FFFFFF;
  --fi-separator:         rgba(60,60,67,0.18);

  /* ---------- ELEVATION / SHADOW ---------- */
  /* signature soft purple-tinted shadows */
  --fi-shadow-card:       0 8px 24px rgba(33,8,46,0.05), 0 2px 6px rgba(33,8,46,0.04);
  --fi-shadow-pop:        0 12px 32px rgba(167,100,255,0.18);
  --fi-shadow-pill:       0 8px 20px rgba(108,68,221,0.30);
  --fi-shadow-tab:        0 2px 8px rgba(0,0,0,0.08);
  --fi-shadow-soft:       0 10px 30px -18px rgba(33,8,46,.12); /* де-факто тень карточек по компонентам */
  --fi-glow-pro:          0 0 16px rgba(255,167,36,0.45);

  /* ---------- RADII ---------- */
  --fi-r-chip:    8px;    /* tags, small pills (square-ish)   */
  --fi-r-field:   12px;   /* inputs, search                   */
  --fi-r-card:    20px;   /* content cards                    */
  --fi-r-sheet:   28px;   /* bottom sheets, big feature cards  */
  --fi-r-pill:    999px;  /* CTA buttons, segmented control    */

  /* ---------- SPACING (iOS 4pt grid) ---------- */
  --fi-sp-1: 4px;  --fi-sp-2: 8px;  --fi-sp-3: 12px;  --fi-sp-4: 16px;
  --fi-sp-5: 20px; --fi-sp-6: 24px; --fi-sp-8: 32px;  --fi-sp-10: 40px;
  --fi-gutter: 16px;     /* standard screen side padding */

  /* ---------- TYPE FAMILIES ---------- */
  /* App UI = SF Pro (self-hosted SF Pro Display + Apple system fallback). */
  --fi-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", Arial, sans-serif;
  --fi-font-text:    "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", Arial, sans-serif;
  /* Deck / marketing oversized headers = SF Pro Display (Heavy/Black weights) */
  --fi-font-deck:    var(--fi-font-display);
  /* Monospace numerals/labels = system mono (no external font; brand face is SF Pro Display only) */
  --fi-font-mono:    "SF Mono", ui-monospace, Menlo, monospace;

  /* iOS tracking: Apple tightens large display text */
  --fi-tracking-tight: -0.02em;
  --fi-tracking-display: 0.012em;  /* matches Figma 0.374px @ 32px */
}

/* ============================================================
   TYPE SCALE  ("Главный / Подзаголовок / Текст" from the file)
   Naming mirrors the Figma text-style sheet exactly.
   ============================================================ */

/* — Главный (headings) — SF Pro Display Bold — */
.fi-glavny-32 { font-family: var(--fi-font-display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: var(--fi-tracking-display); color: var(--fi-ink); }
.fi-glavny-24 { font-family: var(--fi-font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: var(--fi-tracking-display); color: var(--fi-ink); }

/* — Подзаголовок (subtitles) — SF Pro Display Semibold — */
.fi-sub-20 { font-family: var(--fi-font-display); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--fi-ink); }
.fi-sub-16 { font-family: var(--fi-font-display); font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--fi-ink); }
.fi-sub-13 { font-family: var(--fi-font-display); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--fi-ink); }
.fi-sub-10 { font-family: var(--fi-font-display); font-weight: 600; font-size: 10px; line-height: 1.3; letter-spacing: 0.02em; color: var(--fi-ink); }

/* — Текст (body) — SF Pro Display/Text Regular — */
.fi-text-20 { font-family: var(--fi-font-display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--fi-ink); }
.fi-text-17 { font-family: var(--fi-font-display); font-weight: 400; font-size: 17px; line-height: 1.35; color: var(--fi-ink); }
.fi-text-15 { font-family: var(--fi-font-display); font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--fi-ink); }
.fi-text-13 { font-family: var(--fi-font-text);    font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--fi-ink); }
.fi-text-11 { font-family: var(--fi-font-text);    font-weight: 400; font-size: 11px; line-height: 1.35; color: var(--fi-ink); }

/* — article / news body — SF Pro Text Regular 16/1.5 — */
.fi-article-16 { font-family: var(--fi-font-text); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--fi-ink); }

/* — Deck / cover oversized — Inter Bold/Extrabold — */
.fi-deck-hero  { font-family: var(--fi-font-deck); font-weight: 800; font-size: 84px; line-height: 0.98; letter-spacing: var(--fi-tracking-tight); }
.fi-deck-title { font-family: var(--fi-font-deck); font-weight: 700; font-size: 40px; line-height: 1.02; letter-spacing: var(--fi-tracking-tight); }