/*
  TweetLife Design System (Base Web–inspired)
  File: tokens.css

  - RTL-first tokens
  - 4px/8px spacing rhythm
  - Accessible focus ring
  - Legacy --tl-* aliases retained to avoid breaking existing styles
*/

:root{
  /* =====================
     Safe area (iOS notch)
  ====================== */
  --tl-safe-top: env(safe-area-inset-top, 0px);
  --tl-safe-right: env(safe-area-inset-right, 0px);
  --tl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tl-safe-left: env(safe-area-inset-left, 0px);

  /* =====================
     Brand palette (from logo)
  ====================== */
  --tl-brand-navy: #222F75;
  --tl-brand-aqua: #25BCCF;
  --tl-brand-gold: #E1BA41;
  --tl-brand-sand: #F1E9CB;

  /* =====================
     Core semantic colors
  ====================== */
  --tl-color-primary: var(--tl-brand-navy);
  --tl-color-accent: var(--tl-brand-aqua);
  --tl-color-highlight: var(--tl-brand-gold);

  --tl-color-bg: #F8FAFC;
  --tl-color-bg-soft: #F8F7F2;
  --tl-color-surface: #FFFFFF;
  --tl-color-surface-2: #F1F5F9;

  --tl-color-text: #0B1220;
  --tl-color-text-muted: #64748B;

  --tl-color-border: #E2E8F0;
  --tl-color-border-strong: #CBD5E1;

  /* =====================
     Semantic status colors
  ====================== */
  --tl-color-success: #16A34A;
  --tl-color-success-bg: #ECFDF5;
  --tl-color-success-border: #A7F3D0;

  --tl-color-warning: #F59E0B;
  --tl-color-warning-bg: #FFF7ED;
  --tl-color-warning-border: #FED7AA;

  --tl-color-error: #E11D48;
  --tl-color-error-bg: #FFF1F2;
  --tl-color-error-border: #FECACA;

  --tl-color-info: #0EA5E9;
  --tl-color-info-bg: rgba(14,165,233,.10);
  --tl-color-info-border: rgba(14,165,233,.22);

  /* =====================
     Typography
  ====================== */
  --tl-font-sans: Tajawal, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;

  /* Arabic-friendly type scale (Base Web–ish) */
  --tl-text-xs: 12px;
  --tl-text-sm: 13px;
  --tl-text-md: 15px;
  --tl-text-lg: 17px;
  --tl-text-xl: 20px;
  --tl-text-2xl: 24px;
  --tl-text-3xl: 30px;

  --tl-leading-tight: 1.25;
  --tl-leading-snug: 1.45;
  --tl-leading-normal: 1.7;

  /* =====================
     Spacing (4px rhythm)
     xs → xl (and beyond)
  ====================== */
  --tl-space-0: 0px;
  --tl-space-1: 4px;   /* xs */
  --tl-space-2: 8px;   /* sm */
  --tl-space-3: 12px;  /* md */
  --tl-space-4: 16px;  /* lg */
  --tl-space-5: 20px;
  --tl-space-6: 24px;  /* xl */
  --tl-space-7: 32px;
  --tl-space-8: 40px;
  --tl-space-9: 48px;

  /* Page padding + rhythm (used across wrappers) */
  --tl-page-x: 12px;
  --tl-page-y: 16px;
  --tl-gap-inline: 10px;
  --tl-gap-block: 12px;

  /* =====================
     Radius
  ====================== */
  --tl-radius-xs: 10px;
  --tl-radius-sm: 12px;
  --tl-radius-md: 16px;
  --tl-radius-lg: 20px;
  --tl-radius-xl: 24px;

  /* Legacy aliases */
  --tl-radius: var(--tl-radius-lg);

  /* =====================
     Shadows (subtle, Base Web–like)
  ====================== */
  --tl-shadow-xs: 0 1px 2px rgba(2,6,23,.06);
  --tl-shadow-sm: 0 6px 16px rgba(2,6,23,.08);
  --tl-shadow-md: 0 12px 30px rgba(2,6,23,.10);
  --tl-shadow-lg: 0 18px 44px rgba(2,6,23,.12);

  /* Legacy aliases */
  --tl-shadow: var(--tl-shadow-md);

  /* =====================
     Motion
  ====================== */
  --tl-ease-out: cubic-bezier(.2, 0, 0, 1);
  --tl-ease-in: cubic-bezier(.4, 0, 1, 1);

  --tl-dur-1: 90ms;
  --tl-dur-2: 140ms;
  --tl-dur-3: 220ms;

  /* =====================
     Focus ring
  ====================== */
  --tl-focus-ring-color: rgba(37,188,207,.28);
  --tl-focus-ring: 0 0 0 3px var(--tl-focus-ring-color);

  /* =====================
     Z-index map
  ====================== */
  --tl-z-base: 1;
  --tl-z-header: 50;
  --tl-z-bottomnav: 60;
  --tl-z-modal: 1000;
  --tl-z-toast: 1100;

  /* =====================
     Legacy variable aliases (project-wide)
  ====================== */
  --tl-navy: var(--tl-brand-navy);
  --tl-aqua: var(--tl-brand-aqua);
  --tl-gold: var(--tl-brand-gold);
  --tl-sand: var(--tl-brand-sand);

  --tl-primary: var(--tl-color-primary);
  --tl-secondary: var(--tl-color-accent);
  --tl-accent: var(--tl-color-highlight);

  --tl-ink: var(--tl-color-text);
  --tl-muted: var(--tl-color-text-muted);
  --tl-border: var(--tl-color-border);
  --tl-soft: var(--tl-color-bg-soft);
  --tl-surface: var(--tl-color-surface);

  /* Legacy form error vars used by tl_forms.css */
  --tl-error-bg: var(--tl-color-error-bg);
  --tl-error-border: var(--tl-color-error-border);
  --tl-error-ink: #9F1239;
  --tl-error-ring: rgba(225,29,72,.16);
}

@media (min-width: 640px){
  :root{
    --tl-page-y: 18px;
    --tl-gap-inline: 12px;
    --tl-gap-block: 14px;
  }
}

@media ((min-width: 1024px) and (hover: hover) and (pointer: fine)), (min-width: 1367px){
  :root{
    --tl-page-x: 16px;
  }
}

@media (min-width: 1280px){
  :root{
    --tl-page-x: 18px;
  }
}