/* ============================================================
   HIFA OIL Loyalty — Foundations: Color + Type
   ------------------------------------------------------------
   A modern redesign foundation for the HIFA OIL ISOMAX Loyalty
   mobile app (iOS + Android). Dark-first, with a full light
   theme. Brand cues taken from the existing v1.x app:
   charcoal surfaces, ISOMAX gold, HIFA red.

   NOTE: Brand fonts were not supplied. We substitute with
   Google Fonts that match the geometric, energetic tone of
   the current app — Sora (display) + Manrope (text).
   Swap these for the official brand typefaces when provided.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand (official HIFA OIL palette) ---- */
  --hifa-gold:        #FDBF43;   /* primary — ISOMAX žuta */
  --hifa-gold-bright: #FFD06B;   /* hover / highlight */
  --hifa-amber:       #E99135;   /* narandžasta — gradient end, deep accent */
  --hifa-red:         #E2231A;   /* HIFA-OIL logo red (brand mark only) */
  --hifa-red-deep:    #B5160F;
  --hifa-gold-grad:   linear-gradient(135deg, #FDBF43 0%, #E99135 100%);

  /* ---- Dark theme (default) ---- */
  --bg:          #151518;   /* background crna */
  --bg-2:        #1B1B1F;
  --surface:     #202024;
  --surface-2:   #2A2A2F;
  --surface-3:   #36363C;
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);
  --text:        #FFFFFF;   /* bijela */
  --text-2:      #B0B0B4;
  --text-3:      #7A7A7A;   /* text siva */
  --on-gold:     #151518;   /* text/icons on gold surfaces */
  --on-red:      #FFFFFF;

  /* ---- Semantic ---- */
  --success: #3FB970;
  --warning: #F5A623;
  --danger:  #E5484D;
  --info:    #4C9AFF;

  /* ---- Type ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  --fs-display: 34px;   --lh-display: 1.08;  --fw-display: 800;
  --fs-h1:      27px;   --lh-h1: 1.12;       --fw-h1: 700;
  --fs-h2:      21px;   --lh-h2: 1.18;       --fw-h2: 700;
  --fs-h3:      17px;   --lh-h3: 1.25;       --fw-h3: 700;
  --fs-body:    15px;   --lh-body: 1.5;      --fw-body: 500;
  --fs-small:   13px;   --lh-small: 1.45;    --fw-small: 500;
  --fs-label:   11.5px; --lh-label: 1.2;     --fw-label: 700;
  --tracking-label: 0.10em;
  --tracking-tight: -0.01em;

  /* ---- Spacing (4-base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- Radii ---- */
  --r-input:  14px;
  --r-button: 14px;
  --r-tile:   20px;
  --r-card:   22px;
  --r-sheet:  28px;
  --r-pill:   999px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-tile:  0 10px 26px rgba(0,0,0,0.40);
  --shadow-gold:  0 12px 28px rgba(233,145,53,0.32);
  --shadow-pop:   0 18px 50px rgba(0,0,0,0.55);
}

/* ---- Light theme ---- */
[data-theme="light"] {
  --bg:          #F4F2ED;
  --bg-2:        #ECEAE3;
  --surface:     #FFFFFF;
  --surface-2:   #F4F2EC;
  --surface-3:   #ECE9E1;
  --border:      rgba(20,17,12,0.10);
  --border-2:    rgba(20,17,12,0.16);
  --text:        #16130D;
  --text-2:      #5C584F;
  --text-3:      #8E8A7F;
  --on-gold:     #1A1500;
  --shadow-card: 0 1px 2px rgba(20,17,12,0.04), 0 10px 24px rgba(20,17,12,0.08);
  --shadow-tile: 0 10px 24px rgba(20,17,12,0.10);
  --shadow-gold: 0 12px 26px rgba(244,164,30,0.32);
  --shadow-pop:  0 18px 44px rgba(20,17,12,0.18);
}

/* ============================================================
   Semantic type classes
   ============================================================ */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--tracking-tight); }
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--tracking-tight); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
.t-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); }
.t-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-small); }
.t-label { font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.t-num { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }