/* ============================================================
   APTIKDEV — Design Tokens
   All custom properties for the project. No hardcoded values
   outside this file except inside :root declarations.
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary:        #1A365D; /* Deep blue — trust, expertise */
  --color-primary-light:  #2A4A7F;
  --color-secondary:      #4A5568; /* Slate gray — professionalism */
  --color-accent:         #0891B2; /* Cyber teal — innovation */
  --color-accent-dark:    #0773A0; /* Teal AA-accessible (≥4.5:1 vs white) */
  --color-accent-darker:  #055C7E; /* Deep teal for hover states */

  /* ---- Neutral Palette ---- */
  --color-white:          #FFFFFF;
  --color-gray-50:        #F7FAFC;
  --color-gray-100:       #EDF2F7;
  --color-gray-200:       #E2E8F0;
  --color-gray-400:       #A0AEC0;
  --color-gray-500:       #718096;
  --color-gray-600:       #4A5568;
  --color-gray-900:       #1A202C;
  --color-white-alpha-88: rgba(255,255,255,0.88);
  --color-white-alpha-80: rgba(255,255,255,0.80);
  --color-white-alpha-12: rgba(255,255,255,0.12);
  --color-white-alpha-08: rgba(255,255,255,0.08);
  --color-white-alpha-06: rgba(255,255,255,0.06);
  --color-primary-alpha-97: rgba(26, 54, 93, 0.97);
  --color-primary-alpha-98: rgba(26, 54, 93, 0.98);
  --color-primary-alpha-40: rgba(26, 54, 93, 0.4);
  --color-accent-dark-alpha-15: rgba(7, 115, 160, 0.15);

  /* ---- Semantic Tokens ---- */
  --color-bg-page:        var(--color-white);
  --color-bg-section-alt: var(--color-gray-50);
  --color-bg-hero:        var(--color-primary);
  --color-text-on-dark:   var(--color-white);
  --color-text-body:      var(--color-gray-900);
  --color-text-muted:     var(--color-gray-600);
  --color-border:         var(--color-gray-200);
  --color-link:           var(--color-accent-dark);
  --color-link-hover:     var(--color-accent-darker);

  /* ---- Success Palette (US-3.4) ---- */
  --color-success-text:   #166534; /* dark green — 6.98:1 vs #F0FDF4 (WCAG 2.1 AA) */
  --color-success-bg:     #F0FDF4; /* light green tint */
  --color-success-border: #86EFAC; /* medium green */

  /* ---- Button Tokens ---- */
  --btn-primary-bg:       var(--color-accent-dark);   /* #0773A0 — 5.3:1 vs white */
  --btn-primary-text:     var(--color-white);
  --btn-primary-bg-hover: var(--color-accent-darker);
  --btn-hero-bg:          var(--color-white);
  --btn-hero-text:        var(--color-primary);        /* navy on white — 12.4:1 */
  --btn-hero-bg-hover:    var(--color-gray-100);

  /* ---- Typography ---- */
  --font-display: Georgia, 'Palatino Linotype', Palatino, serif;
  --font-body:    'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Font sizes */
  --text-xs:    0.75rem;   /*  12px */
  --text-sm:    0.875rem;  /*  14px */
  --text-base:  1rem;      /*  16px */
  --text-lg:    1.125rem;  /*  18px */
  --text-xl:    1.375rem;  /*  22px */
  --text-2xl:   1.75rem;   /*  28px */
  --text-3xl:   2.25rem;   /*  36px */
  --text-4xl:   3rem;      /*  48px */
  --text-5xl:   4rem;      /*  64px */
  --text-6xl:   5.5rem;    /*  88px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* Letter spacing */
  --tracking-wide:  0.05em;
  --tracking-wider: 0.12em;
  --tracking-widest:0.25em;

  /* ---- Spacing Scale (8px base) ---- */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-16:  128px;

  /* ---- Layout ---- */
  --max-width:       1280px;
  --max-width-form:  720px;
  --measure-readable: 72ch;
  --container-pad:   var(--space-4);
  --header-height:   72px;
  --tap-target-min:  44px;

  /* ---- Radii ---- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.20), 0 4px 8px rgba(0,0,0,0.12);
  --shadow-hero:0 24px 64px rgba(0,0,0,0.30);
  --shadow-btn-hero-hover: 0 6px 24px rgba(0,0,0,0.20);
  --shadow-text-hero: 0 2px 24px rgba(0,0,0,0.30);

  /* ---- Transitions ---- */
  --transition-base:   150ms ease;
  --transition-medium: 250ms ease;

  /* ---- Effect sizes ---- */
  --effect-size-1: 1px;
  --border-width-1: 1px;
  --blur-md: 8px;
  --blur-lg: 12px;

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.45);
}