/**
 * OIC-Atif-alabbasi — tokens.css (placeholder)
 * Version: 1.0.001.002
 *
 * هذا الملف يحتوي على بنية التوكنز الكاملة.
 * سيتم استبداله بملف مولّد من Style Library في الإصدار 002.
 * حالياً يُعرّف القيم الافتراضية فقط.
 *
 * Structure:
 * 1) Color Tokens (Light mode default)
 * 2) Dark Mode Tokens
 * 3) Typography Tokens
 * 4) Spacing Tokens
 * 5) Border & Radius Tokens
 * 6) Shadow Tokens
 * 7) Transition Tokens
 * 8) Z-Index Tokens
 * 9) Container Tokens
 */

/* ==========================================================================
   1) COLOR TOKENS — Light Mode (default)
   ========================================================================== */
:root {
    /* --- Backgrounds --- */
    --oic-token-bg-primary:       #ffffff;
    --oic-token-bg-secondary:     #f8f9fa;
    --oic-token-bg-tertiary:      #e9ecef;

    /* --- Text --- */
    --oic-token-text-primary:     #1a1a1a;
    --oic-token-text-secondary:   #495057;
    --oic-token-text-muted:       #6c757d;
    --oic-token-text-inverse:     #ffffff;

    /* --- Brand --- */
    --oic-token-brand-primary:    #0d6efd;
    --oic-token-brand-primary-hover: #0a58ca;
    --oic-token-brand-secondary:  #6c757d;

    /* --- Semantic --- */
    --oic-token-success:          #198754;
    --oic-token-warning:          #ffc107;
    --oic-token-danger:           #dc3545;
    --oic-token-info:             #0dcaf0;

    /* --- Borders --- */
    --oic-token-border-color:     #dee2e6;
    --oic-token-border-color-strong: #adb5bd;

    /* --- Links --- */
    --oic-token-link-color:       #0d6efd;
    --oic-token-link-hover:       #0a58ca;
    --oic-token-link-visited:     #6610f2;
}

/* ==========================================================================
   2) DARK MODE TOKENS
   Will be activated by Style Library via class or media query.
   ========================================================================== */
[data-theme="dark"] {
    --oic-token-bg-primary:       #1a1a2e;
    --oic-token-bg-secondary:     #16213e;
    --oic-token-bg-tertiary:      #0f3460;

    --oic-token-text-primary:     #e4e4e4;
    --oic-token-text-secondary:   #b0b0b0;
    --oic-token-text-muted:       #808080;
    --oic-token-text-inverse:     #1a1a1a;

    --oic-token-brand-primary:    #4dabf7;
    --oic-token-brand-primary-hover: #74c0fc;

    --oic-token-border-color:     #2c3e50;
    --oic-token-border-color-strong: #495057;

    --oic-token-link-color:       #74c0fc;
    --oic-token-link-hover:       #a5d8ff;
    --oic-token-link-visited:     #b197fc;
}

/* ==========================================================================
   3) TYPOGRAPHY TOKENS
   ========================================================================== */
:root {
    /* --- Font Families --- */
    --oic-token-font-primary:     system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
    --oic-token-font-heading:     var(--oic-token-font-primary);
    --oic-token-font-mono:        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* --- Font Sizes (modular scale) --- */
    --oic-token-fs-xs:    0.75rem;   /* 12px */
    --oic-token-fs-sm:    0.875rem;  /* 14px */
    --oic-token-fs-base:  1rem;      /* 16px */
    --oic-token-fs-md:    1.125rem;  /* 18px */
    --oic-token-fs-lg:    1.25rem;   /* 20px */
    --oic-token-fs-xl:    1.5rem;    /* 24px */
    --oic-token-fs-2xl:   2rem;      /* 32px */
    --oic-token-fs-3xl:   2.5rem;    /* 40px */
    --oic-token-fs-4xl:   3rem;      /* 48px */

    /* --- Font Weights --- */
    --oic-token-fw-normal:   400;
    --oic-token-fw-medium:   500;
    --oic-token-fw-semibold: 600;
    --oic-token-fw-bold:     700;

    /* --- Line Heights --- */
    --oic-token-lh-tight:    1.25;
    --oic-token-lh-normal:   1.6;
    --oic-token-lh-loose:    1.8;
}

/* ==========================================================================
   4) SPACING TOKENS
   ========================================================================== */
:root {
    --oic-token-space-0:    0;
    --oic-token-space-1:    0.25rem;  /* 4px */
    --oic-token-space-2:    0.5rem;   /* 8px */
    --oic-token-space-3:    0.75rem;  /* 12px */
    --oic-token-space-4:    1rem;     /* 16px */
    --oic-token-space-5:    1.25rem;  /* 20px */
    --oic-token-space-6:    1.5rem;   /* 24px */
    --oic-token-space-8:    2rem;     /* 32px */
    --oic-token-space-10:   2.5rem;   /* 40px */
    --oic-token-space-12:   3rem;     /* 48px */
    --oic-token-space-16:   4rem;     /* 64px */
    --oic-token-space-20:   5rem;     /* 80px */
}

/* ==========================================================================
   5) BORDER & RADIUS TOKENS
   ========================================================================== */
:root {
    --oic-token-border-width:      1px;
    --oic-token-border-width-thick: 2px;

    --oic-token-radius-sm:   4px;
    --oic-token-radius-md:   8px;
    --oic-token-radius-lg:   12px;
    --oic-token-radius-xl:   16px;
    --oic-token-radius-full: 9999px;
}

/* ==========================================================================
   6) SHADOW TOKENS
   ========================================================================== */
:root {
    --oic-token-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --oic-token-shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
    --oic-token-shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.1);
    --oic-token-shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   7) TRANSITION TOKENS
   ========================================================================== */
:root {
    --oic-token-transition-fast:   100ms ease-in-out;
    --oic-token-transition-base:   150ms ease-in-out;
    --oic-token-transition-slow:   300ms ease-in-out;
}

/* ==========================================================================
   8) Z-INDEX TOKENS
   ========================================================================== */
:root {
    --oic-token-z-dropdown:   50;
    --oic-token-z-sticky:     100;
    --oic-token-z-overlay:    200;
    --oic-token-z-modal:      300;
    --oic-token-z-toast:      400;
}

/* ==========================================================================
   9) CONTAINER TOKENS
   ========================================================================== */
:root {
    --oic-token-container-sm:   640px;
    --oic-token-container-md:   768px;
    --oic-token-container-lg:   1024px;
    --oic-token-container-xl:   1200px;
    --oic-token-container-2xl:  1400px;
    --oic-token-content-max:    800px;
}