/* variables.css - design tokens and typography variables for AslmadTice
  Used as the source-of-truth for the POC style system
*/
:root{
  /* Font stack */
  --font-family: 'Noto Kufi Arabic', 'Noto Sans Arabic', 'Noto Sans Tifinagh', 'Segoe UI', 'Arial', 'sans-serif';

  /* Base sizes (px) */
  --font-size-body: 16px;
  --font-size-h1: 26px; /* hero title */
  --font-size-h2: 20px;
  --font-size-h3: 18px;
  --font-size-h4: 16px;
  --font-size-h5: 14px;
  --font-size-h6: 13px;

  /* UI sizes */
  --font-size-btn: 16px;
  --font-size-input: 14px;
  --font-size-tag: 10px;
  --font-size-badge: 12px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-body: 1.6;
  --lh-heading: 1.15;

  /* Colors */
  --primary: #360d94;
  --primary-strong: #441fab; /* darker hover shade requested */
  --accent: #1fd655;
  /* Brand colors for CTAs and upload/edit pages */
  --brand: #2b7a3a;        /* dark brand green used for upload/edit CTAs */
  --brand-strong: #255f2f; /* hover/active darker shade */
  --brand-border: #256530; /* border color used on brand buttons */
  --bg: #F6F7FB;
  --card-bg: #FFFFFF;
  --border: #E6E9F0;
  --text: #111827;
  --muted: #6B6F76;
}

/* Apply sensible defaults that pages can inherit */
html { font-size: 16px; }
body { font-family: var(--font-family); font-size: var(--font-size-body); color: var(--text); line-height: var(--lh-body); }

/* Utility tokens (can be extended) */
.container-max-width: 1100px;

/* Additional typography tokens (used across custom.css) */
/* Library/table scale */
--font-size-lib: 1.05rem;   /* ~16.8px */
--font-size-lib-sm: 0.95rem;/* ~15.2px */
--font-size-lib-lg: 1.1rem; /* ~17.6px */

/* Hero-specific sizes */
--font-size-hero-title: 2rem;       /* 32px */
--font-size-hero-subtitle: 1.125rem;/* 18px */

/* Stats / misc */
--font-size-stat-number: 1.375rem; /* ~22px */
--font-size-stat-label: 0.8125rem; /* 13px */

/* File / icon sizes */
--font-size-file-icon: 2rem; /* 32px */
--font-size-file-name: 0.9375rem; /* 15px */

/* Small tag size (kept backward compatible) */
--font-size-tag: 0.625rem; /* 10px */

/* Utility scaling */
--scale-small: 0.9375rem; /* 15px */
--lh-hero-subtitle: 1.5;
--font-size-13: 13px;